跨浏览器 W3C 兼容半透明背景颜色答案

【问题标题】：Cross browser W3C compliant semi-transparent background color跨浏览器 W3C 兼容半透明背景颜色
【发布时间】：2011-11-26 15:06:00
【问题描述】：

设置半透明背景我使用：

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 个像素设置元素的背景颜色？

【问题讨论】：

有趣的是人们如何谈论“跨浏览器兼容性”，他们真正的意思是“它在 IE 中不起作用”。

标签： css background cross-browser w3c transparent

【解决方案1】：

答案#1

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

答案 #2

没有办法使用它们。在 sprites 中，您只能使用在背景中不重复的图像。

例如：假设您有以下精灵

xyz
r t s
你是一个

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

【讨论】：

【解决方案2】：

问题 1：CSS3please。 box-gradient 展示了如何使用 MS-filter。

检查是否有效：W3C CSS validator 。我遇到了错误，所以我猜它不被认为是有效的 CSS

【讨论】：

这就是我在回答中所说的。 IE 过滤器是 CSS 的插件。这意味着不是常规的 CSS 规则，因此对 CSS 无效

【解决方案3】：

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

说到PNG，使用精灵的想法只有在你有特定的高度或宽度或两者都有的情况下才有效。所以这真的不能满足你的需要，就像 Merianos Nikos 说的那样。平铺 1x1 图像也是一个非常糟糕的主意。我这样说是因为这样做时会出现性能问题，尤其是在 IE6 中。尽管 IE6 可能不会对此有所顾虑，但平铺如此小的图像仍然会导致性能下降，因为浏览器必须逐个绘制和重绘。 See this StackOverflow entry.

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

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

【讨论】：