Question

我想在图片上添加图片。

例如，背景中有一个图像，我需要添加play button的图像。用户可以通过点击播放视频。这也会显示在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

使用position：relative on .item和position：absolute on .img-text。您不应该在.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>

所以位置：绝对在.img-container

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

编辑2： 一个小jsFiddle，如下面的评论：http://jsfiddle.net/hsYwV/1/

Answer 2

最简单的方法是将图像设置为背景。

HTML：

<div class="item-active">
        <img class='img-text' src="http://lizkhoo.com/content/play-icon.png" />
      </div>

的CSS：

        .item-active {
                width: 200px;
                height: 200px;
                background-image: url('http://roomista.com/uploads/hotel-gal/250_SunwayHotelHanoiSuperiorRoom.jpg');   
    }


.img-text {
        position: relative;
        left: 75px;
        top: 75px;

        width: 50px;
        height: 50px;
      }

的JScript：

$(".img-text").bind("click", function(){
          alert("play video");
           });

http://jsfiddle.net/J7qnF/2/

在另一个图像上添加图像 - 引导程序

2 个答案: