IE中有多个CSS过滤器

Question

我只是想知道可以使用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);),但它没用.

Answer 1

对不起,但上面选择的答案不正确.您可以在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块将被丢弃,因为它格式错误.(实际上,重要的是需要被彻底抛弃.关于你需要使用它的唯一原因是,如果你正在开发第三方代码并需要保护你的标签免受另一个人!你无法控制的重要开心的开发人员如果你的风格被无意覆盖,你需要一个更具体的声明.)

Answer 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