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

StackOverflow https://stackoverflow.com/questions/423172

  •  05-07-2019
  •  | 
  •  

题

是否可以有两张背景图片？例如，我希望在顶部重复一个图像（repeat-x），并在整个页面上重复另一个图像（重复），整个页面上的一个重复在顶部重复。 / p>

我发现通过设置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;
}

所有主流浏览器的当前版本现在都支持它，但如果您需要支持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;
}

使用background-position调整每个图像位置的简单方法：并使用background-repeat设置重复属性：为每个图像单独设置

当前版本的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

您可以为顶部创建一个div，一个背景，另一个用于主页面，并在页面内容之间分隔页面内容或将内容放在另一个z级别的浮动div中。你这样做的方式可能有用，但我怀疑它会在你遇到的每个浏览器中都有效。

不隶属于 StackOverflow
scroll top