我已经找到了以下完美的 CSS 片段,它在此 link 创建 zip zag 边框。
.h-zigzag {
background:
linear-gradient(-135deg, #333538 5px, transparent 0) 0 5px,
linear-gradient(135deg, #333538 5px, #fff 0) 0 5px;
background-color: #333538;
background-position: left bottom;
background-repeat: repeat-x;
background-size: 10px 10px;
}
正如您所看到的,代码创建了一个完美的之字形边框,但我需要将此边框添加到包含图像的框中,如下所示:
.h-zigzag {
background: url(../img/grrenfooter.png) repeat-x top left scroll transparent;
}
你能帮我混合一下吗?我已经尝试了几种方法,但是当我混合它们时图像消失了!
最佳答案
你可以做到这一点,但你需要屏蔽,据我所知它仅在 webkit 中可用。
#zigzag {
width: 600px;
height: 400px;
-webkit-mask-image: linear-gradient(0deg, transparent 30px, white 30px), linear-gradient(-135deg, white 15px, transparent 15px), linear-gradient(135deg, white 15px, transparent 15px);
-webkit-mask-position: left bottom;
-webkit-mask-repeat: repeat-x;
-webkit-mask-size: 100% 100%, 30px 30px, 30px 30px;
background: url("http://placekitten.com/1000/750");
background-size: cover;
}
body {
background-image: repeating-linear-gradient(20deg, lightgreen, lavender 40px);
}
<div id="zigzag"></div>
这通过创建具有锯齿形图案的图像来实现;并且图像的上部也是透明的。当我们使用它作为 mask 时,它使用透明的背景。
我将主体设置为条纹图案,这样可以看到之字形边框确实是透明的
demo
关于css - 如何将之字形边框添加到包含背景图像的框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19071525/