可以有两个背景图片吗?例如,我想有一个图像在顶部重复(repeat-x),另一个在整个页面重复(repeat),其中一个在整个页面是后面的一个在顶部重复。
我发现我可以通过设置html和body的背景来实现两个背景图像的预期效果:
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}
这是“好的”CSS吗?有没有更好的方法?如果我想要三个或更多的背景图像呢?
CSS3允许这类事情,它看起来像这样:
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
所有主流浏览器的当前版本现在都支持它,但是如果你需要支持IE8或以下版本,那么最好的方法是使用额外的div:
<body>
<div id="bgTopDiv">
content here
</div>
</body>
body{
background-image: url(images/bg.png);
}
#bgTopDiv{
background-image: url(images/bgTop.png);
background-repeat: repeat-x;
}
CSS3允许这类事情,它看起来像这样:
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
所有主流浏览器的当前版本现在都支持它,但是如果你需要支持IE8或以下版本,那么最好的方法是使用额外的div:
<body>
<div id="bgTopDiv">
content here
</div>
</body>
body{
background-image: url(images/bg.png);
}
#bgTopDiv{
background-image: url(images/bgTop.png);
background-repeat: repeat-x;
}
如果你想要多个背景图像,但不希望它们重叠,你可以使用下面的CSS:
body {
font-size: 13px;
font-family:Century Gothic, Helvetica, sans-serif;
color: #333;
text-align: center;
margin:0px;
padding: 25px;
}
#topshadow {
height: 62px
width:1030px;
margin: -62px
background-image: url(images/top-shadow.png);
}
#pageborders {
width:1030px;
min-height:100%;
margin:auto;
background:url(images/mid-shadow.png);
}
#bottomshadow {
margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}
#page {
text-align: left;
margin:62px, 0px, 20px;
background-color: white;
margin:auto;
padding:0px;
width:1000px;
}
使用这个HTML结构:
<body
<?php body_class(); ?>>
<div id="topshadow">
</div>
<div id="pageborders">
<div id="page">
</div>
</div>
</body>