css - 如何将 Zig Zag 边框添加到框包含背景图像

Question

我已经找到了以下完美的 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;
 }

你能帮我把它们混合吗？我已经尝试了几种方法，但是当我混合它们时图像消失了!

Answer 1

你可以这样做，但你需要屏蔽，据我所知它只在 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 时，它会使用透明的背景。

我给 body 设置了条纹图案，这样可以看到锯齿形边框真的很透明

demo