html - 背景图像上的图像闪烁

Question

我在带有百分比的 div 上使用背景图像。当我的 div 变得很小时，图像是局部的。部分缺失或颜色较浅。

原图

小宽度的图像

我该如何解决这个问题？可能是图像格式？

Answer 1

使用 SVG 图像时，闪烁消失了。然而，图像之间的间隔并不总是相同的。似乎做了一个小的调整(我认为它不能在“半”像素上显示任何东西)。

可复现 fiddle

尝试非常缓慢地调整跨度。

    #container .rule{
          background-image :  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='40' height='80'><rect x='0' y='1' width='1' height='100'/><rect x='10' y='1' width='1' height='30'/><rect x='20' y='1' width='1' height='50'/>    <rect x='30' y='1' width='1' height='30'/></svg>");
          background-size: 100% 80px;
}