我如何使用2个图像作为身体第一个背景将在顶部没有重复,第二个图像将在第一个重复之后,在Firefox中我可以轻松地做到这一点但我在IE中的问题
答案 0 :(得分:2)
将一个附加到html
,将另一个附加到body
-
html{
background: url() repeat-y left top;
}
body{
background: url() no-repeat left top;
}
答案 1 :(得分:1)
可以使用专有过滤器添加multiple backgrounds in IE
从链接站点获取,IE代码如下:
<!--[if gt IE 7]>
<style type="text/css">
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs, dont forget to insert your wrappers id */
#outerWrapper #contentWrapper, #outerWrapper #contentWrapper #content {
zoom: 1;
}
/* Now lets make it IE8 Multi-background images */
#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;
}
/* Fix for IE clearType */
#multipleBackgroundImages p {
position: relative; /* required to re-enable IE's clearType */
}
</style>
<![endif]-->
答案 2 :(得分:1)
使用以下代码。这支持所有浏览器,包括IE
body{
width:800px; height:750px;
background: url(http://www.google.com/logos/2012/indonesiaind12-hp.jpg), url(http://www.google.com/logos/2012/india12-hp.jpg);
background-position:top, bottom;
background-repeat:no-repeat, no-repeat
}
您可以获得详细解释here
答案 3 :(得分:0)
使用嵌套的div并将一个背景应用于另一个背景
<div class="background-bottom"><div class="background-top"></div></div>
答案 4 :(得分:0)
简单你必须将身体分成两个独立的div,因为你可以轻松地做到这一点。 top div和bottom div必须将这两个图像作为背景。
它可以在IE中运行