0

如何在链接到 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;
}

请帮忙

4

1 回答 1

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。查看有关兄弟选择器和子选择器的更多详细信息在此处。

p/s：请在未来使用 Fiddle 来说明您的问题。

于 2013-03-03T23:45:51.097 回答