2

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;
}

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!

4

2 回答 2

4

你可以这样做，但你需要屏蔽，据我所知，它只在 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>

这是通过创建具有锯齿形图案的图像来工作的；并且图像的上部也是透明的。当我们将其用作蒙版时，它会使用透明的背景。

我已经为主体设置了条纹图案，以便可以看到锯齿形边框非常透明

演示

于 2013-09-29T20:23:59.780 回答
0

问题

您不能混合使用它们，因为它们都使用该background属性，因此将应用最后一个 CSS 代码，因为它会覆盖之前的 CSS 代码。

解决方案 [演示]

您必须使用CSS2 多背景功能并background-size单独设置：

.h-zigzag {
   height:200px;/*Set this to match with your background image*/
   width:200px;/*Set this to match with your background image*/
   background:
      linear-gradient(-135deg, #333538 5px, transparent 0) 0 5px,
      linear-gradient(135deg, #333538 5px, #fff 0) 0 5px,
      url('http://placekitten.com/200/200');/*Your image URL here*/       
   background-color: #333538;
   background-position: left bottom, left bottom, top;
   background-repeat: repeat-x;
   background-size:
      10px 10px,
      10px 10px,
      100% 100%;/*Your image size here*/
}
于 2013-09-28T21:33:50.670 回答