图像在背景图像上闪烁

时间:2016-05-17 15:16:43

标签: html css image css3 cross-browser

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

enter image description here

图像原件
enter link description here

小宽度的图像
enter link description here

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

2 个答案:

答案 0 :(得分:0)

首先,您使用table,然后在进入后台之前进行分析。

TD'sTable一起使用,您的列表是水平的。

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

因此上面的代码部分使...
enter image description here
您已经在所有TD's(使用课程.rule

的所有背景上应用背景知识

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

SVG会对质量有所帮助,但我不认为它可以解决您的问题。

如果您想要replicate a ruler,可以使用jQuery.Ruler插件,我的JQuery Rulerthis 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;

答案 1 :(得分:0)

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