三个或更多背景堆叠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]类似。这仍然可以通过百分比来完成（使其适用于任何大小的图像），但由于百分比的背景定位如何工作，因此需要使用代数方程式。

注意：元素的高度应该等于放在一起的所有三个图像的高度，以便它们完全显示出来。

＆＃13;

＆＃13;

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;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;