堆叠三个或更多背景 CSS

Question

我尝试使用 CSS 将三个背景堆叠在一起，但最多只出现两个。基本上我想做这样的事情：

这是我使用的代码：

body{
  font-size: 100%;
  background-image: url(ex1.png), url(ex2.png), url(ex3.png);
  background-repeat: no-repeat;
}

是否有任何简单的方法可以使用正文实现此结果，或者我是否被迫改用 div？

Answer 1

当您在一个元素上设置多个图像而不指定 background-position 时，它们都被放置在相同的位置，因此它们将一个在另一个下面。只要图像大小相同，就只会显示一个。如果图像大小不同，比如第一个是 100px 高，第二个是 200px，第三个是 300px 那么对于第一个 100px，第一张图像将显示，对于 100-200px，第二张图像的底部将显示，对于 200-300px最终图像的最后三分之一将显示。

以下是如何在单个元素中堆叠图像。

如果所有三张图片的高度都相同，那么只需提及 background-position: top,center,bottom。此设置意味着第一个图像的顶部将与容器顶部对齐，第二个图像的中心将与容器中心对齐，第三个图像的底部将与容器底部对齐。
如果图像的高度不同，则上述方法将无法按原样工作，必须以实际像素值设置位置，以便第二张和后续图像的位置偏移总和上一张图片的高度。所以，background-position 应该像 0px 0px, 0x [height of image1], 0px [height of image1 + height of image2]。这仍然可以用百分比来完成（以使其适用于任何大小的图像）但它需要使用代数方程因为背景定位与百分比的工作方式。

注意：元素的高度应该等于所有三张图片的高度，这样它们才能完整显示。

div {
  height: 300px;
  width: 100px;
  background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/100/nature/2), url(http://lorempixel.com/100/100/nature/3);
  background-repeat: no-repeat;
  border: 1px solid;
  }
.bg-stack-with-pos {
  background-position: top, center, bottom;
}
.bg-stack-without-pos-diff-height {
  background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/200/nature/2), url(http://lorempixel.com/100/300/nature/3);
}
.bg-stack-with-pos-diff-height {
  height: 600px;
  background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/200/nature/2), url(http://lorempixel.com/100/300/nature/3);
  background-position: 0px 0px, 0px 100px, 0px 300px;

}

<h3>Stacked Images with Background Position - One below the other</h3>
<div class='bg-stack-with-pos'></div>
<h3>Stacked Images w/o Background Position - One behind the other</h3>
<div class='bg-stack-without-pos'></div>
<h3>Stacked Images w/o Background Position and different heights - One below the other</h3>
<div class='bg-stack-with-pos-diff-height'></div>
<h3>Stacked Images w/o Background Position and different heights - One behind the other</h3>
<div class='bg-stack-without-pos-diff-height'></div>

堆叠三个或更多背景 CSS

Three or more backgrounds stacked CSS

html

css

background-image