我可以使用CSS拥有多个背景图像吗?

有可能有两个背景图像吗?例如,我希望在顶部重复一个图像(repeat-x),在整个页面重复另一个图像(repeat),其中在整个页面上重复的图像位于在顶部重复的图像后面

我发现,通过设置html和body的背景,我可以为两个背景图像实现所需的效果:

html{
背景:url(images/bg.png);
}
身体{
背景:url(images/bgtop.png)repeat-x;
}

这是“好”的CSS吗?有更好的方法吗?如果我想要三张或更多的背景图片呢

CSS3允许这样做,它看起来是这样的:

正文{
背景图片:url(images/bgtop.png),url(images/bg.png);
背景重复:重复-x,重复;
}

所有主流浏览器的当前版本现在都支持它,但是如果您需要支持IE8或以下版本,那么解决它的最佳方法是使用额外的div:

<车身>
<div id=“bgTopDiv”>
满足于此
&lt/部门>
&lt/车身>
正文{
背景图片:url(images/bg.png);
}
#bgTopDiv{
背景图片:url(images/bgTop.png);
背景重复:重复-x;
}

发表评论