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

时间:2011-09-28 07:09:42

标签: css background cross-browser w3c transparent

要设置半透明背景,我使用:

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个像素使用此精灵设置元素的背景颜色?

3 个答案:

答案 0 :(得分: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标记添加类,告诉您浏览器的功能。

答案 1 :(得分:0)

回答#1

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

回答#2

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

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

x   y   z
r t s
u v a

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

答案 2 :(得分:0)

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

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