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
}