我可以使用CSS获得多张背景图片吗?


316

是否可以有两个背景图像?例如,我想在顶部重复一幅图像(repeat-x),在整个页面中重复另一幅图像(repeat),其中整个页面中的一幅图像位于顶部重复的一幅图像的后面。

我发现我可以通过设置html和body的背景来获得两个背景图像的预期效果:

html {
    background: url(images/bg.png);
}

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

这是“好” CSS吗?有没有更好的方法?如果我要三个或更多背景图像怎么办?

Answers:


377

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;
}

27
Firefox,Chrome,Safari和Opera的最新版本支持多种背景。IE9也将支持它。en.wikipedia.org/wiki/…–
席姆·维达斯

4
如果您希望使用不同的重复/位置设置,可以执行以下操作:css3.info/preview/multiple-backgrounds
Krisc 2011年


1
背景尺寸是否遵循相同的规则?我希望所有背景图像都为全高,但其中之一(我希望为图像高度)除外。
mtmurdock 2014年

是的,background-size遵循相同的规则(就像所有其他背景属性一样)。实际上可以在背景属性本身中指定背景属性(通常从前缀background-开始,然后是背景的特定属性),因此,由于支持多个背景图像,因此还支持多个列出的属性。这适用于大小,位置,重复次数等
。– Cannicide

35

我发现在一格中使用两个不同背景图像的最简单方法是使用以下代码行:

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


请注意,这仅适用于背景,不适用于背景图像
yoel halb 2014年

24

用这个

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;
}

一种简单的方法可以通过background-position:调整每个图像的位置,并为每个图像分别设置background-repeat:的repeat属性



4

是的,这是可能的,并且已由流行的可用性测试网站Silverback实施。如果查看源代码,您会发现背景是由几幅图像组成的,这些图像彼此重叠。

这是展示如何对维生素起作用的文章。包装这些“洋葱皮”层的类似概念可以在A List Apart上找到。


4

如果要多个背景图像但不希望它们重叠,则可以使用以下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>

2

#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


1

您可以在顶部有一个div,其中一个背景,而另一个在主页面中,然后将页面内容分开,或者将内容放在另一个z层的浮动div中。您执行此操作的方式可能有效,但我怀疑它是否可以在您遇到的每个浏览器中正常工作。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.