我可以使用CSS有多个背景图片吗？
是否有可能有两个背景图像？ 例如，我希望在顶部重复一个图像（repeat-x），并在整个页面上重复一个图像（重复），其中整个页面的图像在顶部重复的图像的后面。
我发现我可以通过设置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; }
所有主stream浏览器的当前版本现在支持它 ，但是如果你需要支持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; }
我发现在一个div中使用两个不同的背景图像的最简单的方法是用这行代码：
body { background:url(image1.png) repeat-x, url(image2.png) repeat; }
显然，这不仅仅是网站的主体，你可以使用任何你想要的div。
希望有所帮助！ 如果有人需要进一步的指导或帮助，我的博客上有一篇文章深入探讨了这个问题 – http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- div 。
用这个
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; }
一个简单的方法来调整你的每个图像位置与背景位置：并设置重复属性与背景重复：为每个图像单独
当前版本的FF和IE以及其他一些浏览器在一个CSS2声明中支持多个背景图片。 看这里http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/和这里http://www.quirksmode.org/css/multiple_backgrounds.html和这里http：/ / /nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
对于IE，你可能会考虑添加一个行为。 看这里： http : //css3pie.com/
是的，这是可能的，并已通过stream行的可用性testing网站Silverback实施 。 如果你仔细查看源代码，你可以看到背景是由多个图像组成的，彼此重叠。
这里是文章展示如何做的效果可以发现维生素 。 在A List Apart上可以find类似的包装这些“洋葱皮”层的概念。
如果你想要多个背景图片，但不希望它们重叠，可以使用这个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>
其实有一篇文章 ，告诉你如何使用CSS文件中的IE筛选器来做到这一点。
我希望这是有用的。
你可以有一个div的顶部有一个背景，另一个主页面，分离他们之间的页面内容或把内容在另一个z级别的浮动div。 你这样做的方式可能会工作，但我怀疑它会适用于你遇到的每一个浏览器。
#example1 { background: url(css/img_flwr.gif) left top no-repeat, url(css/img_flwr.gif) right bottom no-repeat, url(css/paper.gif) left top repeat; padding: 15px; background-size: 150px, 130px, auto; background-position: 50px 30px, 430px 30px, 130px 130px; }
<!DOCTYPE html> <html> <head> </head> <body> <div id="example1"> <h1>Lorem Ipsum Dolor</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </body> </html>
