如何将Zig Zag边框添加到框中包含背景图像 [英] How To Add Zig Zag Border to a Box contains background image
问题描述
我已经找到以下完美的CSS代码段,它在此链接。
I already find following perfect CSS snippet which creates zip zag border at this link.
.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;
}
正如你可以看到的代码创建一个perfecr zig zag边框,将此边框添加到包含图像的框中:
As you can see the code create a perfecr zig zag border but I need to add this border to a box which contains an image as:
.h-zigzag {
background: url(../img/grrenfooter.png) repeat-x top left scroll transparent;
}
你能帮我混合吗?我已经尝试了几种方法,但是当我混合它们时,图像消失了!
can you please help me to mix them? I already tried several ways but the image disappears when I mix them!
推荐答案
#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>
锯齿形图案;并且还具有图像的上部也是透明的。当我们使用它作为掩码,它使用透明的背景。
This works by creating an image that has the zigzag pattern ; and also that has the upper part of the image also transparent. When we use that as a mask, it uses the background where it is transparent.
我已将条纹图案设置为正文,以便可以看出锯齿边框真的是透明的
I have set the body with a stripes pattern so that it can be seen that the zig zag border is really transparent
这篇关于如何将Zig Zag边框添加到框中包含背景图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!