IE 中的多个 CSS 过滤器
Posted
技术标签:
【中文标题】IE 中的多个 CSS 过滤器【英文标题】:Multiple CSS filters in IE 【发布时间】:2012-07-25 04:25:07 【问题描述】:我只是想知道是否可以使用 CSS 在 IE 中应用两种不同的过滤器。
所以,我需要使用透明的 PNG 以及对div
的一些不透明度。可以同时使用吗?
我的透明制造线如下所示:
li.item .item-texture
background: none transparent scroll repeat 0% 0% !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ie/articles/item-content-hov.png', sizingMethod='scale') !important;
我尝试再添加一行(filter: alpha(opacity=50);
)并用逗号分隔过滤器(..'scale') !important, alpha(opacity=50);
),但没有用。
【问题讨论】:
你选择的答案是错误的..参考第二个答案... 【参考方案1】:抱歉,上面选择的答案不正确。您可以在 IE 中应用多个过滤器,但它们需要用一个或多个空格分隔。
空格前的逗号也可以使用,但前提是它跟在右括号之后。因此,没有gray
等参数的 IE 4.0 过滤器在这种情况下不起作用。最好只使用空格作为分隔符。
如果您转到上面给出的链接:http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx,然后单击following example link(当然是在 IE 中),您会看到第二张图像同时应用了旋转和模糊。从“查看源代码”来看,图片标签为:
<img id=image2 src="/workshop/samples/author/dhtml/graphics/sample.jpg"
style="filter:progid:DXImageTransform.Microsoft.Blur(strength=50),
progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"
border="0" >
我已经在某种程度上成功地模拟了 IE7 和 8 中盒子阴影的“传播”(尽管成功取决于您认为它看起来的可接受程度),使用:
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=0)
progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=90)
progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=180)
progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=270);
这样阴影就会从 div 的各个侧面扩散开来。我还在包含渐变的 div 上组合了阴影。然而,这并非一帆风顺。在上面的例子中,阴影有布局,你必须调整边距以适应它们的大小。此外,由于 IE 是 IE,其中一些过滤器的组合可能会产生意想不到的后果,从而导致开发变通方法、放弃方法以及拔掉头发。
在您问题的原始示例中,如果您列出多个过滤器,则前一个过滤器将被后续过滤器覆盖,就像任何其他 CSS 属性一样。在您的第二个示例中,“!important”必须完全位于样式的末尾,否则整个 CSS 块会因为格式错误而被丢弃。 (实际上, !important 需要完全抛弃。您需要使用它的唯一原因是,如果您正在开发第三方代码并且需要保护您的标签免受另一个 !important-happy 开发人员的影响,您无法控制他们. 如果您的样式被无意覆盖,您需要更具体的声明。)
【讨论】:
应该注意,在 IE 8 中,如果你有过滤器,空格就不起作用。将需要逗号。【参考方案2】:过滤器属性不能超过 1 个,因为 IE 只会使最后一个生效。
注意:由于这似乎得到了一些反对票,我想澄清这并不意味着您不能应用多个过滤器,只是您只能使用 1 filter
属性。如果您尝试应用多个过滤器并将它们分成多个属性,则只有最后一个会生效。
根据MSDN的以下文章,它们不是用逗号而是用空格分隔的:http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx
另请注意,某些 IE 过滤器(包括 alpha)要求元素具有布局才能正确应用:http://www.satzansatz.de/cssd/onhavinglayout.html
【讨论】:
所以还是一块... (:【参考方案3】:逗号被忽略。您需要一个空格或换行符来粘贴多个过滤器。
progid:xxx progid:yyy / works
progid:xxx, progid:yyy / works
progid:xxx
progid:yyy / works
progid:xxx,progid:yyy / will not work
【讨论】:
以上是关于IE 中的多个 CSS 过滤器的主要内容,如果未能解决你的问题,请参考以下文章