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

我有三个背景图像，我想他们是在彼此的顶部。除此之外，我想手动放置它们，而不仅仅是对齐

我该怎么做

---

您可以使用

位置：绝对
将div放置在彼此的顶部。然后，您的div需要一个宽度才能可见。每个DIV现在都可以有一个z索引，您可以用它来确定谁在上面。
.
您可以使用
位置：绝对
将div放置在彼此的顶部。然后，您的div需要一个宽度才能可见。每个DIV现在都可以有一个z索引，您可以用它来确定谁在上面。
.
使用CSS3，可以应用于元素。还可以为每个背景设置自定义

第一个值是水平位置，第二个值是垂直位置。左上角是0%0%。右下角是100%100%。如果只指定一个值，则另一个值将为50%。默认值为：0%0%


body，html{
保证金：0；
填充：0；
}
div{
宽度：100%；
高度：100vh；
背景图像：url（“https://pbs.twimg.com/profile_images/604644048/sign051.gif"),
网址（“https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif"),
网址（“http://www.quicksprout.com/images/foggygoldengatebridge.jpg");
背景尺寸：80px，300px，封面；
背景重复：无重复；
背景位置：50%90%，50%底部，中间；
}
使用CSS3，可以应用于元素。还可以为每个背景设置自定义

第一个值是水平位置，第二个值是垂直位置。左上角是0%0%。右下角是100%100%。如果只指定一个值，则另一个值将为50%。默认值为：0%0%


body，html{
保证金：0；
填充：0；
}
div{
宽度：100%；
高度：100vh；
背景图像：url（“https://pbs.twimg.com/profile_images/604644048/sign051.gif"),
网址（“https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif"),
网址（“http://www.quicksprout.com/images/foggygoldengatebridge.jpg");
背景尺寸：80px，300px，封面；
背景重复：无重复；
背景位置：50%90%，50%底部，中间；
}
试试这个：

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

此外，还需要调整图像的像素。
希望这有帮助
试试这个：

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

此外，还需要调整图像的像素。
希望这有帮助
您可以使用css3为一个div使用多个背景，如下所示：

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; */

上面的示例代码使用速记，但您也可以这样编写：

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

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

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; */

上面的示例代码使用速记，但您也可以这样编写：

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

为什么不嵌套div？为什么不嵌套div呢？这很好，但是我会手动设置图像的位置而不是对齐吗？你可以，但你可以提供你想要的图像外观。它在哪里并不重要，我对这样做的方式感兴趣。试着把最后两张图片放在你想放的任何地方。这很好，但是我怎么能手动设置图片的位置而不是对齐？你可以但你可以提供你想要的图片外观。不管它在哪里，我对这样做的方式感兴趣。试着把最后两张图片放在你想要的地方。