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

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:以后请用Fiddle来说明你的问题。