css - 如何使IE筛选器和CSS透明背景一起显示？

我正在尝试获得透明的PNG和渐变，以在IE中以相同的方式显示。现在，滤镜在背景图像上占主导地位。如果我取出过滤器，则显示PNG。理想情况下，我希望PNG位于渐变之上。

CSS：

.defaultSelection {
    border: 1px solid #bbb; color: #222222; outline: 0 none;
    background: url('/img/dropdown-arrow.png') right center no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e9e9e9', endColorstr='#ffffff' )
}

HTML：

<li class="defaultSelection">Current Selection</li>

最佳答案

好消息：IE可以做到这一点（尽管别人怎么说）。但是它确实需要一个名为CSS3Pie的小技巧。

CSS3Pie是IE的一种骇客，它允许它使用普通的CSS支持各种CSS3功能，而不是那些可怕的filter样式。

有关支持的功能，请参见此处：http://css3pie.com/documentation/supported-css3-features/

您会注意到，这包括使用图像和渐变指定背景的功能：

如上面链接的页面所述，除了正常的-pie-background样式外，还可以简单地使用background指定CSS，还可以使用Pie behavior样式来运行Pie脚本。

#myElement {
    background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*webkit*/
    background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
    behavior: url(PIE.htc);
}

在后台，CSS3Pie创建一个VML元素，并将其与真实元素分层以实现所需的效果（VML是IE6及更高版本支持的矢量图形语言）。但是您不需要了解所有这些内容，因为Pie会花一些时间使自己对开发人员和用户完全透明。它确实存在一些错误和已知问题，但是总的来说，它是一个非常好的工具，可以将IE的较旧版本提升到与更现代的浏览器相当的水平。