css背景图像泄漏

Question

这是一个由带有 3 个背景图像的 div 组成的 WavyBar 组件。 照片和顶部的一张波浪形白色图像和照片顶部的底部的另一张。 这会产生波浪效果。

页面顶部和底部的银线

正如你在这张图片上看到的，这个 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

已经试过 box-sizing: with all values

Answer 1

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

最后下面的解决方案对我有用。 您需要将图像包装在高度与图像高度相同（或低于）的 Div 元素中。 并将图像稍微推到顶部。

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

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