css背景图像泄漏

Question

这是一个由3个背景图像的div组成的WavyBar组件。顶部的照片和1个波浪状白色图像以及照片顶部的另一个底部。这产生了波浪效应。

silver line on the top and bottom of the page

正如你在这张图片上看到的那样，这个div的顶部和底部有一条银线，这是背景照片泄漏到div之外的地方。

使用的css如下：

 background-image: url(2de1e10e83bb3f12dc8bfeb1818ee536.png), url(eeb31e00f15749916d5fd9d3ab2b8f10.png), url(f03c768d84f5d17e39ba033692433d0f.png);
    background-repeat: repeat-x, repeat-x, no-repeat;
    background-position: left top, left bottom, center center;
    background-size: auto, auto, cover;

添加这些样式，有点解决了问题，但在div的顶部创建了一条白线

  padding: 1px 0;
  background-clip: content-box;

https://cloud.githubusercontent.com/assets/1951007/20140914/fe52e0c0-a674-11e6-944e-f16a6791659c.png

已经尝试了盒子大小调整：包含所有值

Answer 1

陷入类似的问题。即使在使用边距，填充和框大小调整之后，为背景设置的背景颜色也会从顶部和底部泄漏。

最后，以下解决方案为我工作。您需要将图像包装在与图像高度相同（或小于）的Div元素中。并将图像稍微推到顶部。

.image{
    position: relative;
    top: -4px;
}

.parent{
    height: 240px; // keep it fix or use css calc() function
}