在IE中使用多个CSS过滤器

10

我想知道在IE中是否可以使用CSS应用两个不同的过滤器。 所以,我需要在 div 上同时使用一个透明的PNG和一些不透明度。这两者都可以同时使用吗?

我的制作透明效果的代码如下:

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);),但它没有起到作用。


您选择的答案是错误的。请参考第二个答案。 - MonteCristo
3个回答

15

抱歉,但是上面选中的答案是不正确的。在 IE 中,你可以应用多个过滤器,但是它们需要用一个或多个空格隔开。

在空格之前加逗号也可以,但是只有在跟在括号后面的情况下才有效。因此没有参数的 IE 4.0 过滤器(如gray)在这种情况下不起作用。最好只使用空格作为分隔符。

如果你访问上面给出的链接:http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx,并且在 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)"
     height="165px" width="256px" border="0" alt="ocean beach">

我已经在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”开发人员的影响,但您无法控制他。如果您的样式被意外覆盖,您需要更具体的声明。)


2
需要注意的是,在IE 8中,如果有过滤器,空格将无效。需要使用逗号。 - Erik L

7

在IE浏览器中,只有最后一个filter属性生效,因此不能使用多个filter属性。

注意:虽然这篇文章遭到了一些负面评价,但需要澄清的是,这并不意味着您不能应用多个滤镜,只能使用1个filter 属性。如果您尝试将多个滤镜分别放置在多个属性中,则仅最后一个滤镜将生效。

根据MSDN中的以下文章,它们之间用空格而不是逗号进行分隔:http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx

另请注意,某些IE滤镜(包括alpha)需要元素具有布局才能正确应用:http://www.satzansatz.de/cssd/onhavinglayout.html


2
所以它仍然是一块……(: - b_benjamin

0

逗号会被忽略。您需要使用空格或换行来粘贴多个过滤器。

progid:xxx progid:yyy / works

progid:xxx, progid:yyy / works

progid:xxx  
progid:yyy / works

progid:xxx,progid:yyy / will not work

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接