背景图像上的图像闪烁

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;
}

Answer 2

首先，您使用的是table，所以让我们在进入后台之前对其进行分析。

通过使用TD's 和Table，您的列表是水平的。

<table id="container">
  <td>hello</td>
  <td>hello</td>
  <td>hello</td>
  <td>hello</td>
</table>

所以上面这段代码使得...

您正在将您的背景应用到所有 TD's（与 .rule 类）

意思是因为您使用的是基于百分比的宽度（它将填充TD's 宽度）并在此处减小尺寸+质量。

SVG 有助于提高质量，但我认为它无法解决您的问题。

如果你想replicate a ruler，你可以使用jQuery.Ruler插件，我的JQuery Ruler，或this Pen，它使用CSS渐变。

在下面的例子中 (weave) 我拿了我的JQuery Ruler 并将它用作没有编号标记的图像。在重复的背景下。 （请注意，我没有将其应用于 TD，因为对于这种情况，您希望将其应用于父级。

.ruler {
  height: 27px;
  background: #eee;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAaCAYAAAD1wA/qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AUREBciNhBoqgAAAIZJREFUWMPt2DEKAyAQBMA9n6An+P/3+QL17lLFIkUigRCQXdhumwEtVHrvuCFJVeMKCC4JIYQQQgghhBBCCCGEEELIXyFjDMw5d9dau2YGM4OqhrvD3RERu695vjhF5G1VNVJK+NTT3d1Hq7V29I6vtR7tSilHu5zz1ztedkJ+FAFwxb/WA0m1Oj6D5YBIAAAAAElFTkSuQmCC');
}

<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>

<div class="ruler"></div>