跨浏览器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图像合并为一个精灵。

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


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

说到PNG,使用精灵的想法只有在你有特定的高度或宽度或者两者都有效时才有效。 所以这真的不适合你需要的东西,就像Merianos Nikos说的那样。 平铺1x1图像是一个非常可怕的想法。 我这样说是因为当你这样做时有性能问题,尤其是在IE6中。 虽然IE6可能不是这方面的问题,但平铺这样一个小图像依然会导致性能下降,因为浏览器必须绘制并重绘每一个。 看到这个StackOverflow条目。

对于这种情况,我会使用像Modernizr这样的东西,它将使rgba可用于不支持rgba的浏览器。 在为rgba和其他一些东西(HTML5 shim,yepnope和添加CSS类)定制下载之后,下载量为6.1kb。 不会让开发更容易。

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


答案#1

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

答案#2

没有办法使用它们。 在精灵中,您只能使用在后台不重复的图像。

例如:假设你有以下精灵

x   y   z
r t s
u v a

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


问题1:CSS3please。 方框渐变显示如何使用MS过滤器。

检查是否有效:W3C CSS验证器。 我收到错误,所以我猜这不是有效的CSS

链接地址: http://www.djcxy.com/p/89315.html

上一篇: Cross browser W3C compliant semi

下一篇: Make a background image transparent using CSS