我可以使用 CSS 拥有多个背景图像吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/423172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I have multiple background images using CSS?
提问by Rudd Zwolinski
Is it possible to have two background images? For instance, I'd like to have one image repeat across the top (repeat-x), and another repeat across the entire page (repeat), where the one across the entire page is behind the one which repeats across the top.
是否可以有两个背景图像？例如，我想让一个图像在顶部重复 (repeat-x)，另一个在整个页面上重复 (repeat)，其中整个页面上的图像在顶部重复的图像后面。
I've found that I can achieve the desired effect for two background images by setting the background of html and body:
我发现我可以通过设置html和body的背景来实现两张背景图片想要的效果：
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}
Is this "good" CSS? Is there a better method? And what if I wanted three or more background images?
这是“好”的 CSS 吗？有没有更好的方法？如果我想要三个或更多背景图片怎么办？
回答by nickf
CSS3 allows this sort of thing and it looks like this:
CSS3 允许这种事情，它看起来像这样：
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:
所有主要浏览器的当前版本现在都支持它，但是如果您需要支持 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;
}
回答by TheLibzter
The easiest way I have found to use two different background images in one div is with this line of code:
我发现在一个 div 中使用两个不同的背景图像的最简单方法是使用以下代码行：
body {
background:url(image1.png) repeat-x, url(image2.png) repeat;
}
Obviously, that does not have to be for only the body of the website, you can use that for any div you want.
显然，这不一定只适用于网站的正文，您可以将其用于您想要的任何 div。
Hope that helps! There is a post on my blog that talks about this a little more in depth if anyone needs further instructions or help - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div.
希望有帮助！如果有人需要进一步的说明或帮助，我的博客上有一篇文章会更深入地讨论这个问题 - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-分区。
回答by code.rider
use this
用这个
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;
}
a simple way to adjust you every image position with background-position: and set repeat property with background-repeat: for every image individually
一种使用 background-position: 调整每个图像位置的简单方法，并使用 background-repeat: 为每个图像单独设置重复属性
回答by Shannon
Current version of FF and IE and some other browsers support multiple background images in a single CSS2 declaration. Look here http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/and here http://www.quirksmode.org/css/multiple_backgrounds.htmland here http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
当前版本的 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/
For IE, you might consider adding a behavior. Look here: http://css3pie.com/
对于 IE，您可能会考虑添加一个行为。看这里：http: //css3pie.com/
回答by rachel
If you want multiple background images but don't want them to overlap, you can use this CSS:
如果您想要多个背景图像但不希望它们重叠，则可以使用此 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;
}
with this HTML structure:
使用此 HTML 结构：
<body
<?php body_class(); ?>>
<div id="topshadow">
</div>
<div id="pageborders">
<div id="page">
</div>
</div>
</body>
回答by Mike B
Yes, it is possible, and has been implemented by popular usability testing website Silverback. If you look through the source code you can see that the background is made up of several images, placed on top of each other.
是的，这是可能的，并且已经由流行的可用性测试网站Silverback 实现。如果您查看源代码，您会发现背景由多个图像组成，并相互叠加。
Here is the article demonstrating how to do the effect can be found on Vitamin. A similar concept for wrapping these 'onion skin' layers can be found on A List Apart.
这里是展示如何做可以在维生素上找到效果的文章。可以在A List Apart上找到用于包装这些“洋葱皮”层的类似概念。
回答by Rinku
#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>We can easily add multiple images using CSS3. we can read in detail here http://www.w3schools.com/css/css3_backgrounds.asp
我们可以使用 CSS3 轻松添加多个图像。我们可以在这里详细阅读http://www.w3schools.com/css/css3_backgrounds.asp
回答by Sean James
You could have a div for the top with one background and another for the main page, and seperate the page content between them or put the content in a floating div on another z-level. The way you are doing it may work but I doubt it will work across every browser you encounter.
您可以将顶部的 div 与一个背景和另一个用于主页，并将它们之间的页面内容分开，或者将内容放在另一个 z 级别的浮动 div 中。您这样做的方式可能有效，但我怀疑它是否适用于您遇到的每个浏览器。
