Html IE与使用css的多个背景图像的兼容性问题
为什么下面的代码不能在ie中工作Html IE与使用css的多个背景图像的兼容性问题,html,css,Html,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; 在IE8中尝试如下所示的hack 有关详细信息,请参见链接 /*现在让我们将其设为IE8多背景图像*
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;
在IE8中尝试如下所示的hack 有关详细信息,请参见链接 /*现在让我们将其设为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;
}
您可以使用css3饼图在ie中使用多个背景
#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属性添加到需要使用饼图行为的规则中
您可以通过添加以下内容将其应用于所有标记:
*{behavior: url(/PATH-TO/PIE.htc);}
但这带来了巨大的性能成本您最好在需要使用css3 pie的元素中添加一个类
pie
,并使用以下方法将其作为目标:
.pie {behavior: url(/PATH-TO/PIE.htc);}
你不能在一个css id/类中设置两个背景图像你在测试哪个版本的IE?@Nilesh对于OP,如果你在旧的IE上测试,只需使用CSS3 pie即可。它在Chrome中工作,Firefox@Nileshcss3 pie似乎不工作。这也需要behavior属性吗?文件不是很清楚。