Question

为什么下面的代码不能用于？

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;

Answer 1

你可以使用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*/
}

可以在http://css3pie.com/documentation/supported-css3-features/#pie-background

找到更多信息

编辑：您需要将行为属性添加到需要使用饼图行为的规则中。

您可以通过添加以下内容将其应用于所有代码：

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

但这会带来巨大的性能成本。
最好的方法是在需要使用css3 PIE的元素中添加一个类pie，并使用以下命令对其进行定位：

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

Answer 2

尝试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; 
}

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

2 个答案: