Css 使用过滤器在ie9中定位背景图像

我有一个带有渐变背景和背景图像的

div

。它在除ie9之外的所有主流浏览器中都非常有效。我有两个显示，但我不知道如何定位背景图像

必要时使用适当的浏览器前缀，我将使用以下选项：

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

但在IE9中，我使用

过滤器

，因为这是唯一的

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的过滤器。

我建议使用内嵌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：

---

因为看起来您使用的更少，所以我找到了一个更少的mixin，它将为您自动执行此操作：。我还没有测试mixin，但它看起来应该能起作用。

我没有想到这一点。好主意，少混音效果很好！谢谢