html - 在另一个图像上添加图像 - bootstrap

Question

我想在图像上添加图像。

例如，背景中有一个图像，我需要在该图像之上添加一个播放按钮的图像。用户可以通过单击播放视频的位置。这也显示在 Shopify 主页上。

<!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">

                    <img width='100%' 
                        src='http://roomista.com/uploads/hotel-gal/250_SunwayHotelHanoiSuperiorRoom.jpg' />
                <div class='img-container'>
                    <div class='img-text'>
                        <img src="http://lizkhoo.com/content/play-icon.png" alt="..." />
                    </div>

                </div>

CSS 如下:

.img-container {
    width: 100%;
    position: relative;
    display: inline-block;
    margin: 10px 5px 5px;
}

.img-text {
    width: 100%;
    display: block;
}

Answer 1

在 .item 上使用 position: relative，在 .img-text 上使用 position: absolute。您不需要在 .img-text 上使用 z-index，但如果它出现在 .img-container 下，请使用它。

.img-text {
    /*position: absolute;*/ Wrong, see edit
    width: 100%;
    display: block;
    /*top: ?; bottom: ?; left: ?; right: ?; //to place it as you want.*/
}

.item{
    position: relative;
}

编辑:我误读了您的代码，(缩进严重 :p)

<!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img width='100%' 
               src='http://roomista.com/uploads/hotel-gal/250_SunwayHotelHanoiSuperiorRoom.jpg' />
            <div class='img-container'>
                <div class='img-text'>
                    <img src="http://lizkhoo.com/content/play-icon.png" alt="..." />
                </div>
            </div>
        </div>
    </div>

所以 position: absolute on .img-container

.img-container {
    position: absolute;
    top: ?; bottom: ?; left: ?; right: ?; //to place it as you want.
}

编辑 2 :一点 jsFiddle，喜欢下面的评论:http://jsfiddle.net/hsYwV/1/