clip-path

Why does clip-path affect the stacking order (z-index) of elements later in DOM?

由 泪湿孤枕 提交于 2020-07-03 11:08:14
问题 This has been asked before, but only where z-index is explictly defined in the CSS. I am trying to use clip-path on a heading, but then pull up an image from within an element beneath this back over the top of that header. However, as soon as I define a clip-path on the header, the image (which should be higher up the stacking order as it appears later in the code) goes underneath the header : body { padding: 1em; } header { background: #a00; clip-path: polygon(0 0, 100% 0, 100% calc(100% -

black and white text based on background image with css

由 偶尔善良 提交于 2020-06-12 04:13:20
问题 I am trying to achieve this effect of a black and white text on a bi-colored header which is always white on a side, and with a background image on the other side (of different colors). this is the css used for this example, which works only because the image has a solid black background: .text { position: relative; color: rgb(255, 255, 255); mix-blend-mode: difference; text-transform: uppercase; font-size: 60px; } this doesn't work if the background image doesn't have a solid black

black and white text based on background image with css

由 梦想与她 提交于 2020-06-12 04:12:23
问题 I am trying to achieve this effect of a black and white text on a bi-colored header which is always white on a side, and with a background image on the other side (of different colors). this is the css used for this example, which works only because the image has a solid black background: .text { position: relative; color: rgb(255, 255, 255); mix-blend-mode: difference; text-transform: uppercase; font-size: 60px; } this doesn't work if the background image doesn't have a solid black

SVG ClipPath: Why does applying the clip path to a DIV have different results to an IMAGE?

由 ﹥＞﹥吖頭↗ 提交于 2020-05-24 04:54:47
问题 I need to create a set of 3 triangles that each have content in them (images, copy, etc). I have setup this Pen to show roughly what I'm trying to achieve: https://codepen.io/andystent/pen/OJyNdmB And here is an image for quick reference: In this example the "Top" and "Left" triangles are IMAGES with the clip-path applied and displaying perfectly. The "Right" triangle (with the red background) is a DIV with the clip-path applied but the proportions are wrong. It should look like a mirrored

i cant get a shape with polygon transform

由 梦想的初衷 提交于 2020-05-15 19:42:08
问题 I have a problem making a shape for a li, I need it to have a diagonal line and a smooth border, but I can't get it. This its what i got for now. ul { list-style-type: none; margin: 0; padding: 0; list-style-position: inside; display:flex; } li { position: relative; height: 40px; width: 300px; margin: 10px; padding-right: 30px; line-height: 40px; text-align: right; text-transform: uppercase; border-radius: 8px; background: crimson; color: white; -webkit-clip-path: polygon(0% 0%, 0% 50%, 10%

Click through transparent image pixel

由 亡梦爱人 提交于 2020-05-11 00:57:31
问题 I don't want the transparent part of the images to be clickable. I found <map> but the coordinates are in pixels and I want to do something responsive. Another problem: I can't find why there is some pixels between the bottom of the first picture and the top of the second picture. https://jsfiddle.net/tsfxy84u/ .container { width: 90%; margin: 0 auto; overflow: auto; } .left { float: left; } .right { float: right; } .resize { width: 50%; } img { width: 50%; } .two { -webkit-clip-path: polygon

How to resize ClipPath area of SVG?

由 杀马特。学长 韩版系。学妹 提交于 2020-04-25 09:27:00
问题 I have such code: .img-container { width: 300px; height: 300px; background-color: lightgreen; overflow: hidden; } .clipped-img { clip-path: url('#header-clip-svg'); } <div class="img-container"> <!--clipping SVG--> <svg height="0" width="0"> <defs> <clipPath id="header-clip-svg"> <path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100

How to resize ClipPath area of SVG?

由 纵饮孤独 提交于 2020-04-25 09:25:07
问题 I have such code: .img-container { width: 300px; height: 300px; background-color: lightgreen; overflow: hidden; } .clipped-img { clip-path: url('#header-clip-svg'); } <div class="img-container"> <!--clipping SVG--> <svg height="0" width="0"> <defs> <clipPath id="header-clip-svg"> <path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100

前端学习(8)~css学习(二)：背景属性

由 纵饮孤独 提交于 2020-02-18 21:42:44
background 的常见背景属性 css2.1 中，常见的背景属性有以下几种：（ 经常用到，要记住 ） background-color:#ff99ff; 设置元素的背景颜色。 background-image:url(images/2.gif); 将图像设置为背景。 background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要） no-repeat 不要平铺； repeat-x 横向平铺； repeat-y 纵向平铺。 background-position:center top; 设置背景图片在当前容器中的位置。 background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。 属性值可以是： scroll （与fixed属性相反，默认属性）、 fixed （背景就会被固定住，不会被滚动条滚走）。 另外还有一个综合属性叫做 background ，它的作用是：将上面的多个属性写在一个声明中。 CSS3 中，新增了一些background属性： background-origin background-clip 背景裁切 background-size 调整尺寸 多重背景 上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。 background-color：背景颜色的表示方法 css2.1

巧妙实现带圆角的渐变边框

由 北慕城南 提交于 2020-02-17 15:45:43
如何实现下面这个渐变的边框效果： 这个问题本身不难，实现的方法也有一些，主要是有一些细节需要注意。 border-image border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。 顾名思义，我们可以给 border 元素添加 image，类似于 background-image ，可以是图片也可以是渐变，不再局限于纯色。 使用 border-image 实现渐变边框 有了 border-image 之后，实现渐变边框变得很方便 不过多介绍 border-image 的语法，读者需要自行了解一下。 实现如下： <div class="border-image"></div> .border-image { width: 200px; height: 100px; border-radius: 10px; border-image-source: linear-gradient(45deg, gold, deeppink); border-image-slice: 1; border-image-repeat: stretch; } 上面关于 border-image 的三个属性可以简写为 border-image:
订阅 clip-path