Question

要设置半透明背景，我使用：

background-color: rgba(0, 120, 180, 0.8);

对于不支持rgba的IE，我使用相同颜色的1x1 png：

background-image: url(http://i53.tinypic.com/2mgtu9e.png);

（demo here）

问题1

我知道IE还有另一种使用过滤器的方法。

此方法是否符合W3C标准？

问题2

假设我将20个1x1 png图像组合成一个精灵。

如何根据精灵中的第7个像素使用此精灵设置元素的背景颜色？

Answer 1

正如其他人所说，没有IE过滤器不符合W3C标准。它们也会产生很大的开销并且会产生性能影响。除非在将过滤器应用于HTML元素时出错，否则它将应用于该元素中的所有内容，包括其文本。所以你最终也会得到半透明的文字。可能有办法防止这种情况发生，但我没有遇到过它。有时，IE过滤器不能很好地与半透明PNG一起使用this article mentions。

说到PNG，使用精灵的想法只有在你有特定的高度或宽度或两者时才有效。所以这对你所需要的东西真的不起作用，就像Merianos Nikos说的那样。同样平铺1x1图像是一个非常可怕的想法。我这样说是因为当你这样做时会出现性能问题，特别是对于IE6。虽然IE6可能不是一个问题，但是平铺这么小的图像仍会导致性能损失，因为浏览器必须绘制并重绘每一个。 See this StackOverflow entry

对于这种情况，我会使用类似Modernizr的东西，这将使rgba可用于不支持rgba的浏览器。在为rgba和其他一些东西（HTML5 shim，yepnope和添加CSS类）定制下载后，下载量为6.1kb。使开发变得更容易并不是一个巨大的打击。

更新当我说Modernizr启用rgba时，我想错了。它没有这样做，但它会让你知道在浏览器中启用了rgba。它会向html标记添加类，告诉您浏览器的功能。

Answer 2

回答＃1

此方法不符合W3C。 Internet Explorer使用过滤器的方式不是常规方式。 W3C规范根本不支持过滤器。过滤器是Internet Explorer插件。

回答＃2

无法使用它们。在精灵中，您只能使用在背景中不重复的图像。

在示例中：假设您有以下精灵

x   y   z

r   t   s

u   v   a

如果您现在有一个区域，您希望将其用作精灵中的图像t作为背景。您可以设置div的最左上方以显示t图像，但是当您需要重新渲染背景时，您将从x重新开始。这意味着你将重复精灵中的所有图像。

Answer 3

问题1：CSS3please。框梯度显示了如何使用MS过滤器。

检查是否有效：W3C CSS validator 。我收到错误，所以我猜它不算是有效的CSS

跨浏览器符合W3C标准的半透明背景色

3 个答案: