css - 停止填充 DIV 的背景颜色

Question

我有一个带有透明区域的 PNG 图像。这有点像锯齿形边缘的结帐收据撕裂。它将位于具有白色背景的 div 的底部以模拟收据。我已经尝试如下。

 background: #ffffff url("../images/zigzag.png") bottom right no-repeat; 

但是背景白色填充到图像的边缘

除了创建另一个 div 之外，还有没有办法阻止背景颜色进入图像下方？

Answer 1

使背景色透明：

#foo {
  background: transparent url(yourzig-zagImage) no-repeat 0 0;
}

Answer 2

添加另一个div可能是最干净的解决方案。

但是，如果您的高度div有限，您可以改为使div透明的背景，并用白色像素扩展“不规则边缘”图像的顶部，直到它足够高，它总是为主要部分提供白色背景div. _