要设置半透明背景,我使用:
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个像素使用此精灵设置元素的背景颜色?
答案 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