如何将背景图像放在彼此的顶部？

Question

我有三张背景图片，我希望它们彼此重叠。除此之外，我想手动放置它们而不仅仅是对齐。

我该怎么做？

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

-

.first {
  background: url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg") no-repeat;
  background-size: 100% 100%;
  height: 400px;
}

.second {
   background: url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;
  background-size: 300px;
  height: 200px;
}

.third {
     background: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif") no-repeat;
  background-size: 80px;
  height: 100px;
}

Answer 1

您可以将 DIV 与 position:absolute 放在一起。然后你的 DIVs 需要一个宽度才能可见。每个 DIV 现在都可以有一个 z-index，您可以用它来确定谁在上面。 See this fork of your pen.

Answer 2

使用CSS3，您可以为每个背景应用multiple backgrounds to elements. You can also set custom background-position。

The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%

body, html {
  margin: 0;
  padding: 0;
}

div {
  width: 100%;
  height: 100vh;
  background-image: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif"),
                    url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif"),
                    url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg");
  background-size: 80px, 300px, cover;
  background-repeat: no-repeat;
  background-position: 50% 90%, 50% bottom, center;
}

<div></div>

Answer 3

试试这个：

<div id="container">
    <div id="main_image"></div>
    <div id="overlay_image"></div>
</div>


#container{
    position: relative;
    width: 200px;
    height: 200px;
}
#main_image{
    width: 100%;
    height: 100%;
    background: blue;
}
#overlay_image{
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: red;
}

在您的情况下，您可能只需要更改

background : url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;

您还需要调整图像的像素。希望这有帮助

Answer 4

您可以为一个 div 使用多个背景，使用 css3，如下所示：

background: 
url(3.png) 600px 10px no-repeat,  /* On top,    like z-index: 3; */
url(2.png) 100px 100px no-repeat,   /*            like z-index: 2; */
url(1.png) 50px 50px no-repeat;  /* On bottom, like z-index: 1; */

上面的示例代码使用了shorthand，但你也可以这样写：

background: url(3.png), url(2.png), url(1.png);/*left to right: top, middle, bottom*/
background-size: 600px 10px, 100px 100px, 50px 50px;

Learn more about multiple backgrounds.

如何将背景图像放在彼此的顶部？

How to place background images on the top of each other?

html

css

background-image