0

シャドーボックス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 { margin:10px 4px 0 12px; 境界線: 2 ピクセルの黒一色。}

.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 に答える