使用css的多个背景图片的IE兼容性问题

为什么下面的代码不能在ie中工作？使用css的多个背景图片的IE兼容性问题

background-image: url(../images/bg_top3.jpg), url(../images/gradient.png); 
background-repeat: no-repeat, repeat-x; 
background-color: #fff; 
background-position: center top, left top;

来源

2013-04-12 sephiith

你不能设置两个背景图像中的一个CSS ID /类 – Nilesh

IE的哪个版本你在测试吗？ – Sampson

@Nilesh http://www.css3.info/preview/multiple-backgrounds/和OP，如果你正在测试旧的IE浏览器，只需使用CSS3派 –

黑客尝试像下面IE8 见链接有关详情http://cookbooks.adobe.com/post_Cross_Browser_Multi_background_images__including_I-16839.html

/*现在，让我们使IE8多背景图片*/

#multipleBackgroundImages { 
    background-image: url(../images/lilys.jpg); 
    background-position: bottom right; 
    background-repeat: no-repeat; 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/lakeside2.png', sizingMethod='crop')"; 
    border: 1px solid black; 
    padding: 0 1em; 
}

来源

2013-04-12 06:23:43 Nilesh

它似乎没有显示ms-filter图片 – sephiith

您可以使用CSS3馅饼在即使用多个背景

#myElement { 
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(/PATH-TO/PIE.htc);}

但这配备了巨大性能成本。
您是通过添加类pie到你需要使用CSS3 PIE的元素更好，并且使用目标是：

.pie {behavior: url(/PATH-TO/PIE.htc);}

来源

2013-04-12 06:41:41

这是否也需要行为属性？文档不完全清楚。 – bgmaster

@bgmaster查看编辑答案 –

使用css的多个背景图片的IE兼容性问题

回答

相关问题