如何将一个图像放入另一个图像中，并在该图像中放入文本和小图像(最后一个)

Question

我正在尝试制作一个滑块。我如何把一个图像放到另一个图像和把文字和一个小图像在图像(最后一个)?我把一个图像放入另一个没有问题的位置:相对于主div并给出第二个图像位置:绝对。但是第三部分(在图像中放入小图像和文本)比较棘手。我给了绝对的图像和文本位置的容器，但它是定位出的图像div。也许一个小的例子可以帮助。由于

#maincontainer{
    width:650px;
    margin:0 auto;
    margin-top: 25px;
    position: relative;
}
#image1container
{
    width: 650px;
    margin:0 auto;
    margin-top: 25px;
    position: absolute;
    top: 95px; 
    left: 137px;
}
#image2container{
    position:absolute;
}

Answer 1

你可以尝试在HTML中使用<div>元素的background-image CSS属性。你的HTML看起来像这样:

<div id="maincontainer">
    <div id="image1container">
        <img src="small-image.jpg" alt="Small image />
        <p>Text in image</p>
    </div>
</div>

你的CSS看起来像这样:

#maincontainer {
    background-image: url('main-container-image.jpg');
}
#image1container {
    background-image: url('image1-container-image.jpg');
}

从这里开始，您可以使用CSS根据需要来定位元素。