Question

如何在链接到shadowbox vimeo视频的缩略图图像上叠加播放按钮png

阴影框有效，这不是问题。在缩略图上实现透明播放按钮的问题

HTML：

enter code here
<div class="postsingle">

        <a href="http://player.vimeo.com/video/55138154" rel="Shadowbox" title="demo">
            <img class="demothumbnail" src="https://secure-b.vimeocdn.com/ts/410/203/410203139_640.jpg" alt="thumbnail image"> 
            <span class="playIcon"><img src="images\PlayButton.png">  </span>
        </a>

    </div>

的CSS： .postsingle { 保证金：10px 4px 0 12px; 边框：2px纯黑色; }

.demothumbnail{
    position: absolute;
    width: 400px; height: auto;
    z-index: 1;

}

.demothumbnail span.playIcon{
    float: auto;
    position:absolute;
     z-index: 0;
}

请帮助

Answer 1

为什么float: auto声明？

.playIcon范围未嵌套在.demothumbnail中，这就是您的CSS规则未应用的原因。

如果您希望播放图标叠加层覆盖整个缩略图，请使用：

.postSingle a {
    position: relative; /* The parent has to be set to relative */
}
.playIcon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
}

如果您的意思是要选择.demothumbnail的直接兄弟，请使用：.demothumbnail + .playIcon。查看有关兄弟和子选择器的更多详细信息here。

p / s：请使用小提琴来说明您的问题。

如何在链接到shadowbox vimeo视频的缩略图图像上叠加播放按钮png

1 个答案: