使用滤镜在ie9中定位背景图像

Question

我有一个具有渐变背景和背景图像的div。它在除ie9以外的所有主流浏览器中都运行良好。我有两个显示，但我不知道如何定位背景图像。

使用适当的浏览器前缀，必要时我使用如下:

background: url("../images/green-home-icon.png") no-repeat center top 10px, linear-gradient(top, @top-color 0%,@bottom-color 100%);

但是在IE9中，我使用filter，因为这是唯一的css方式:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/green-home-icon.png') progid:DXImageTransform.Microsoft.gradient( startColorstr='@{top-color}', endColorstr='@{bottom-color}',GradientType=0);

是否有一种方法可以在IE9中定位背景图像，同时保持渐变，就像我们在其他浏览器中一样?我希望图像在div中居中。我希望在不添加额外元素的情况下这样做。

这是一个小提琴。它只有IE9的过滤器

Answer 1

我建议使用内联SVG代替非标准IE过滤器。它看起来像这样:

background: url("../images/green-home-icon.png") no-repeat center top 10px, url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

JSFiddle: http://jsfiddle.net/Lnqbhag1/

因为它看起来像你在使用LESS，我已经找到了一个LESS mixin，将自动为你:https://gist.github.com/brysongilbert/3895260。我还没有测试过mixin，但它看起来应该可以做到。