跨浏览器W3C兼容半透明背景色
要设置半透明背景，我使用：
background-color: rgba(0, 120, 180, 0.8);
对于不支持 rgba 的 IE，我使用具有相同颜色的 1x1 png：
background-image: url(http://i53.tinypic.com/2mgtu9e.png);
(演示在这里)
问题1
我知道IE还有另一种使用过滤器的方法。
此方法是否符合 W3C 要求？
问题 2
假设我将 20 个 1x1 png 图像组合成一个精灵。
我如何使用这个精灵根据精灵中的第七个像素设置元素的背景颜色？
To set a semi-transparent background I use:
background-color: rgba(0, 120, 180, 0.8);
For IE, which doesn't support rgba I use a 1x1 png with the same color:
background-image: url(http://i53.tinypic.com/2mgtu9e.png);
Question 1
I know that there is another method for IE which uses filters.
Is this method considered as W3C compliant ?
Question 2
Say I combine 20 1x1 png images into a single sprite.
How could I use this sprite to set an element's background color according to the 7th pixel in the sprite ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
正如其他人所说，没有 IE 过滤器不符合 W3C 标准。它们还会产生大量开销并影响性能。除非我在将过滤器应用于 HTML 元素时弄错了，否则它将应用于该元素中的所有内容，包括其文本。所以你最终也会得到半透明的文本。可能有办法阻止这种情况发生，但我还没有遇到过。另外，有时 IE 滤镜不能很好地处理半透明 PNG，如 this文章提到。
说到 PNG，只有当您有特定的高度或宽度或两者兼而有之时，使用精灵的想法才真正有效。因此，正如 Merianos Nikos 所说，这确实无法满足您的需求。另外，平铺 1x1 图像也是一个非常糟糕的主意。我这样说是因为这样做会带来性能问题，尤其是对于 IE6。尽管 IE6 可能不关心这个问题，但平铺如此小的图像仍然会导致性能下降，因为浏览器必须绘制并重绘每一个图像。 查看此 StackOverflow 条目。
对于这种情况，我会使用类似 Modernizr 的东西，这将使 rgba 可在不支持的浏览器中使用rgba。在为 rgba 和其他一些东西（HTML5 shim、yepnope 和添加 CSS 类）定制下载后，下载大小为 6.1kb。使开发变得更容易并不是一个巨大的打击。
更新 当我说 Modernizr 支持 rgba 时，我说错了。它不会这样做，但它会让您知道浏览器中启用了 rgba。它将向
html标记添加类，告诉您浏览器的功能。As others have said, no IE filters are not W3C compliant. They also incur significant overhead and have performance ramifications. Unless I am mistaken when a filter is applied to an HTML element it will be applied to everything in that element including its text. So you'd end up with semi-transparent text too. There may be a way to keep that from happening but I haven't come across it. Also there are times when IE filters don't play well with semi-transparent PNGs as this article mentions.
Speaking of PNGs, the idea of using a sprite really only works if you have a specific height or width or both. So this really won't work for what you need, like Merianos Nikos said. Also tiling a 1x1 image is a really terrible idea. I say this because there are performance issues when you do that, especially with IE6. Though IE6 may not be a concern for this, tiling such a small image still causes a performance hit since the browser must draw and redraw each and every one. See this StackOverflow entry.
For this situation I would use something like Modernizr which will make rgba available to use in browsers that don't support rgba. After customizing a download for just rgba and a few other things (HTML5 shim, yepnope, and adding CSS classes) the download was 6.1kb. Not a huge hit to make development easier.
Update I misspoke when I said that Modernizr enables rgba. It doesn't do that but it will let you know that rgba is enabled in the browser. It will add classes to the
htmltag that tells you the abilities of the browser.答案#1
此方法不符合 W3C 标准。 Internet Explorer 使用过滤器的方式与常规方式不同。 W3C 规范根本不支持过滤器。过滤器是 Internet Explorer 插件。
答案#2
没有办法使用它们。在精灵中，您只能使用在背景中不重复的图像。
例如：
如果您现在有一个想要将精灵中的图像用作背景的区域，则假设您有以下精灵。您可以将 div 的最左上角设置为显示 t 图像，但是当您需要重复背景时，您将从 x 重新开始。这意味着您将重复精灵中的所有图像。
Answer #1
This method is not W3C compliant. The way that Internet Explorer uses Filters is not the regular one. Filters are not supported at all from the W3C specification. The filters are Internet Explorer plugins.
Answer #2
There is no way to use them. In sprites you can only use images that are not repeated in the background.
In example: Say that you have the following sprite
if you have now an area that you like to use as a background the image t from your sprite. You can set the very top left side of the div to display the t image, but then when you need to reapeat the background you will start again from x. That means that you will have repeated all the images from the sprite.
问题 1：CSS3please。框梯度显示了如何使用 MS 滤波器。
检查是否有效：W3C CSS 验证器。我收到错误，所以我猜它不被视为有效的 CSS
Question 1: CSS3please. The box-gradient shows how to use the MS-filter.
To check if valid: W3C CSS validator . I'm getting errors, so I guess it's not considered valid CSS