如何获取 IE 过滤器和 IE 过滤器CSS透明背景一起显示？

Question

我正在尝试获取透明的 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>

Answer 1

好消息：这在 IE 中是可能的（不管其他人怎么说）。但它确实需要一个名为 CSS3Pie 的小技巧。

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

请参阅此处了解其支持的功能： http://css3pie.com/documentation/supported-css3-features /

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

如上面链接的页面所述，只需在中使用 -pie-background 指定 CSS除了正常的background 样式，也可以使用 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 提升到与更现代的浏览器相同的水平。

Answer 2

您是否尝试过在 li 上使用渐变，然后将图像应用到 li 内的元素上？

<li class="defaultSelection">Current Selection<span class='bg'> </span></li>

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

Answer 3

这在 IE 中是不可能的，因为滤镜渐变本质上是另一个背景图像（它取代了它的位置）。尝试颠倒顺序，在 CSS 选择器中先使用滤镜，最后使用背景图像，您很可能会看到该图像。

最好的选择是使用分层，或者使用同时具有图像和透明度的 PNG。