背景图片不显示 IE8答案

【问题标题】：Background image not showing IE8背景图片不显示 IE8
【发布时间】：2013-08-06 16:53:30
【问题描述】：

由于某种原因，IE8 和 IE9 中没有显示背景图像。它显示在 IE10、Chrome 和 Firefox 中。

这里是相关的 CSS：

.addCartButton 
{
    background: url('/images/cartWhite.png') 18px 11px no-repeat, -ms-linear-gradient(top,#74c163,#1d7a09);
    background: url('/images/cartWhite.png') 18px 11px no-repeat, -moz-linear-gradient(top,#74c163,#1d7a09);
    background: url('/images/cartWhite.png') 18px 11px no-repeat, -webkit-linear-gradient(top,#74c163,#1d7a09);
    background: url('/images/cartWhite.png') 18px 11px no-repeat, linear-gradient(top,#74c163,#1d7a09);
}

【问题讨论】：

IE 不支持多个 bg's
@RaphaelDDL：你的意思是我不能同时拥有背景图片和渐变？
不。据我所知，渐变算作背景图像。如果浏览器不支持 css 3 多背景，则全部失败（视为无效属性值）。我知道 IE9 在某种程度上支持多个 bg，但它有很多问题（在已知问题上查看 caniuse.com/#feat=multibackgrounds）。而且由于 IE9 不知道 css 3 渐变，它使整个声明无效（caniuse.com/#feat=css-gradients）

标签： css internet-explorer-8 internet-explorer-9 background-image

【解决方案1】：

CSS3 multiple background 不受 IE 8 及更低版本的支持。所以逗号分隔的背景值是无效的，因此不起作用。

它在 IE9 上不起作用，即使它支持多个背景（有问题但确实如此），因为 IE9 不支持CSS3 Gradient 所以它再次使整个声明无效。

我建议您在多个背景声明上使用!important，但将单个背景声明作为最后一行，这样IE9及以下版本可以显示至少一个BG：

background: url('/images/cartWhite.png') 18px 11px no-repeat, -ms-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, -moz-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, -webkit-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, linear- gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat; /* for IE9 and below */

作为另一种选择，您可以使用CSS3Pie。示例：

#myElement {
    behavior: url(http://path/to/pie/PIE.htc);
    background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    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 位于同一域中时才有效。 Read more.

【讨论】：