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中background-image元素的<div> 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来定位元素。

如何将一个图像放入另一个图像并将文本和小图像放在该图像中（最后一个）？

1 个答案: