Answers:
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;
}
我发现在一格中使用两个不同背景图像的最简单方法是使用以下代码行:
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。
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/
是的,这是可能的,并且已由流行的可用性测试网站Silverback实施。如果查看源代码,您会发现背景是由几幅图像组成的,这些图像彼此重叠。
这是展示如何对维生素起作用的文章。包装这些“洋葱皮”层的类似概念可以在A List Apart上找到。
如果要多个背景图像但不希望它们重叠,则可以使用以下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>
#example1 {
background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/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>
我们可以使用CSS3轻松添加多个图像。我们可以在这里详细阅读http://www.w3schools.com/css/css3_backgrounds.asp