Question

我有一个DIV图像，我将其设为一个按钮。为此，我使用两个背景图像（SVG格式）和边框（出于调试目的，边框特别大）。我希望背景图像显示在边框下方。样机CSS：

.element {
background: url(bg1.svg) no-repeat,
    url(bg2.svg) no-repeat;
background-clip:border-box, border-box;
-webkit-background-clip:border-box;
-moz-background-clip:border-box;
background-size: cover, cover;
border: 10px inset rgba(255, 255, 255, .20);
}

另请注意，该元素是弹性框，因此它会动态调整大小。

结果： Chrome，IE，Firefox和Safari都会在边框的一部分下方显示背景，但不是全部。

Chrome和IE仅在边框的底部面板下显示背景。

Chrome背景和边框之间也有一到两个像素。

有关此问题出现原因或解决方法的任何想法？

修改：当图片为PNG格式时，Chrome中背景和边框之间的小差距通常不是问题。问题似乎是背景不够大。知道怎么解决这个问题吗？

Answer 1

找到修复：background-size：封面似乎是基于内容大小（没有边框）。使用大于100％的值可以解决足够大的元素的问题。

我还需要将preserveAspectRatio="none"添加到SVG脚本中。

边界区域搞乱了多个SVG背景

1 个答案: