图像在背景图像上闪烁

Question

我在div上使用百分比的背景图片。 当我的div非常小时，图像是偏的。 部分缺失或颜色较浅。

图像原件

小宽度的图像

我怎么能解决这个问题？ 图像格式可能吗？

Answer 1

首先，您使用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＆＃39;因为在这种情况下你想要它在父母身上。

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用SVG图像时，闪烁消失了。 但是，图像之间的间隔并不总是相同的。 这似乎是一个小调整（我认为它不能在＆＃34;一半＆＃34;像素上显示任何内容）。

可以重现 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;
}