我可以使用CSS拥有多个背景图像吗？_Css_Background Image

我可以使用CSS拥有多个背景图像吗？

css

我可以使用CSS拥有多个背景图像吗？,css,background-image,Css,Background Image,有可能有两个背景图像吗？例如，我希望在顶部重复一个图像（repeat-x），在整个页面重复另一个图像（repeat），其中在整个页面上重复的图像位于在顶部重复的图像后面我发现，通过设置html和body的背景，我可以为两个背景图像实现所需的效果： html{ 背景：url（images/bg.png）； } 身体{ 背景：url（images/bgtop.png）repeat-x； } 这是“好”的CSS吗？有更好的方法吗？如果我想要三个或更多的背景图像呢？你可以在顶部有一个div，其中一个

有可能有两个背景图像吗？例如，我希望在顶部重复一个图像（repeat-x），在整个页面重复另一个图像（repeat），其中在整个页面上重复的图像位于在顶部重复的图像后面

我发现，通过设置html和body的背景，我可以为两个背景图像实现所需的效果：

html{
背景：url（images/bg.png）；
}
身体{
背景：url（images/bgtop.png）repeat-x；
}

这是“好”的CSS吗？有更好的方法吗？如果我想要三个或更多的背景图像呢？

你可以在顶部有一个div，其中一个背景，另一个用于主页，然后将页面内容在它们之间分开，或者将内容放在另一个z级的浮动div中。您这样做可能会奏效，但我怀疑它是否能在您遇到的每个浏览器中都起作用。

CSS3允许这样做，它看起来是这样的：

正文{
背景图片：url（images/bgtop.png），url（images/bg.png）；
背景重复：重复-x，重复；
}

但是，如果您需要支持IE8或以下版本，那么解决这一问题的最佳方法是使用额外的div：

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

是的，这是可能的，并且已经被流行的可用性测试网站实现了。如果您仔细查看源代码，您可以看到背景是由几个图像组成的，它们相互重叠

下面是一篇文章，演示如何在上找到效果。可以在上找到包装这些“洋葱皮”层的类似概念。

当前版本的FF和IE以及一些其他浏览器在单个CSS2声明中支持多个背景图像。看看这儿，这儿，这儿

对于伊江，你可以考虑添加一个行为。查看此处：

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

我发现在一个div中使用两个不同背景图像的最简单方法是使用以下代码行：
body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

显然，这不一定只针对网站的主体，你可以将其用于任何你想要的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;
}

一种简单的方法，可以使用背景位置调整每个图像位置：并使用背景重复设置重复属性：分别为每个图像设置重复属性
#示例1{
背景：url(http://www.w3schools.com/css/img_flwr.gif)左上角不重复，url(http://www.w3schools.com/css/img_flwr.gif)右下角无重复，url(http://www.w3schools.com/css/paper.gif)左上重复；
填充：15px；
背景尺寸：150px，130px，自动；
背景位置：50px 30px，430px 30px，130px 130px；
}

同侧阴唇
这是一位杰出的领袖，他是一位伟大的领袖
但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务
最新版本的Firefox、Chrome、Safari和Opera支持多种背景。IE9也将支持它。如果您希望有不同的重复/位置设置，您可以这样做：对于IE8-IE6，您可以使用PIE.js。背景大小是否遵循相同的规则？我希望我的所有背景图像都是全高的，除了其中一个（我希望是图像高度）。是的，背景大小遵循相同的规则（与所有其他背景属性一样）。背景属性（通常以前缀background开始，然后是背景的特定属性）实际上可以在背景属性本身中指定，因此，由于支持多个背景图像，因此也支持多个列出的属性。这适用于大小、位置、重复等。请注意，这仅适用于背景，而不适用于背景图像