相关疑难解决方法(0)

我有一个奇怪的错误.我在一个覆盖一些文本的DIV中平铺一个半透明的1x1像素黄色PNG图像.使用普通的浏览器,一切看起来都应该如此.上面有一些文字和黄色,半透明的覆盖层.

但是,在Internet Explorer 8中,不显示1x1 PNG图像,而是显示渐变(!).

CSS很简单:

.edit_section_overlay {
  position: absolute;
  z-index: 150;

  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;

  border: 1px solid #afad9d;
  background: url('../../images/content/edit/section/overlay/background-color.png') repeat;

  min-height: 34px;
  cursor: move;
}

我以前从未见过像这样的bug,Google也没有帮助我......

这是jsFiddle中的一个演示,http://jsfiddle.net/jUVfS/

我想知道是否有人用背景图片做过任何测试.我们通常创建一个至少在一个方向(x或y或两者)重复的背景.

示例
假设我们有一个在X方向重复的渐变背景.梯度高度为400px.我们有几种可能性.我们可以创建尽可能小的图像(1像素宽和400像素高)或者我们可以创建400像素高的更大图像.

观察
由于梯度高达400像素,我们可能不会选择GIF格式,因为它只能存储256种自适应颜色.如果我们的渐变是微妙的,也许这是非常的,因为它没有那么多,但是否则我们可能宁愿将图像存储为24位PNG图像以保留完整的渐变细节.

困境
我们应该创建一个1×400像素大小的图像,水平重复n次,或者我们应该创建一个100×400像素大小的图像,以加快浏览器中的渲染速度并获得更大的图像文件大小.

所以.图像大小与渲染速度有关？哪一个获胜？有人关心测试吗？关于浏览器渲染速度和可能的小图像重绘闪烁...

可能重复:
CSS Sprites和重复背景

是否有任何技巧可以使用精灵图像作为可重复的背景？

使用css sprite作为图标风格的图像是最好的做法,现在非常简单.

在一个图像中使用多个重复背景传统上只有在它们仅使用垂直或水平重复时才可能.

或者是吗？与css3和html5以及所有东西相比,有没有办法在一个css精灵中组合多个背景图像来制作背景图案并使用垂直和水平重复？

编辑/注意:我知道这不是第一次提出这样的问题.但我发现的大多数/所有答案都是前一段时间.我只是想知道今天是否有解决方案.

编辑:说明我正在寻找的内容:http://ibin.co/21LqyJvnGdMB