三个或更多背景堆叠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>