我可以使用CSS获得多个背景图像吗？

有可能有两幅背景图像吗？例如，我想让一个图像在顶部重复(重复-x)，另一个重复跨整个页面(重复)，其中整个页面的图像重复在顶部重复的图像后面。

我发现我可以通过设置html和body的背景来达到两幅背景图像的预期效果：

html {
    background: url(images/bg.png);}body {
    background: url(images/bgtop.png) repeat-x;}

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

FFIVE

浏览 344回答 3

3回答

绝地无双

CSS 3允许这样的事情，它看起来是这样的：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;}

慕码人8056858

用这个body {background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);background-repeat: no-repeat,  repeat-x, repeat-y;background-position:10px 20px , 20px 30px ,15px 25px;}一种简单的方法，可以用背景位置来调整每个图像的位置：并为每个图像单独设置“背景-重复”属性。

随时随地看视频慕课网APP