如何將一張圖片放入另一張圖片，並在該圖片中放入文字和小圖片（最後一張）？

Question

我想製作一個滑塊。我怎麼能把一個圖像放入另一個圖像，並在該圖像（最後一個）中放置文本和小圖像？我已經把一個圖像放入另一個沒有問題的圖像，通過給位置：relative in for main div並給出第二個圖像位置：absolute。但第三部分（在圖像中放置小圖像和文本）很棘手。我給了圖像和文本位置的容器絕對，但它位於圖像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需要的元素的位置。