1

画像のギャラリーがあり、そのすべてに透明な画像を画像の上に追加したいと考えています。

実際には1つの画像で機能しますが、複数の画像を操作するときに透明なオーバーレイ画像を配置する方法がわかりません. 同じクラスを使用してギャラリーで複数の画像を操作する場合、これは最適ではない可能性があります。

私のコードを見てください。おそらく、あなたは私よりもよく理解できるでしょう

**css**

    .related-videos{
position:relative;  
}

.related-videos img{
width: 100px; 
height: 100px;
}


.related-videos span{
width:100px;
height:100px;
display: block;
    position:absolute;
    top: 0;
    left: 0;
background: url('../thumbs/overlay.png') no-repeat;
}

1 つの画像を含む html

<div class="related-videos">
<h3>Related Videos</h3>
<span></span>
<img src=".jpg" />
</div>

複数の画像に対して現在機能していないソリューション

<div class="related-videos">
<h3>Related Videos</h3>
<span></span>
<img src=".jpg" />
<span></span>
<img src=".jpg" />
<span></span>
<img src=".jpg" />

</div>


.related-videos{
position:relative;  
}

.related-videos img{
width: 100px; 
height: 100px;
}


 .related-videos span{
width:100px;
height:100px;
display: inline;
background: url('../thumbs/overlay.png') no-repeat;
4

2 に答える 2

2

topandleftプロパティを削除して、表示を次のように変更するだけです。inline-block

フィドル: http://jsfiddle.net/gamehelp16/yg7fP/

画像が一列に並んでいることを確認するだけです

于 2012-12-25T13:55:47.510 に答える
1

簡単な解決策は、HTML のspanの後にを移動し、次のようにスタイルを設定することです。img

.related-videos スパン {
    幅: 100px;
    高さ: 100px;
    表示: インラインブロック; 
    マージン左: -100px;
    背景: url('../thumbs/overlay.png') 繰り返しなし;
}
.related-videos img {
    幅: 100px;
    高さ: 100px;
}

これは jsFiddle of itで、デモ用にウィキメディア・コモンズからランダムな画像が使用されています。このソリューションは、画像の行が折り返すのに十分な長さであっても機能します。

于 2012-12-25T13:52:30.173 に答える