0

Web ページの 1 つに画像のリストを作成しました。ホバーすると、不透明度が少し失われ、画像の上にテキストが表示されます。ただし、CSS を介してのみこれを機能させることができます。つまり、クラスにリンクされた画像を 1 つだけ持つことができます。つまり、同じ画像を持っている必要があります。下の画像を参照してください。

ここに画像の説明を入力

私が試したのは、CSS から画像リンクを取り出し、それを各リスト項目に入れ、それぞれに異なる画像を付けることです (これが私が望んでいることです)。しかし、その後、画像は境界内にうまく表示されず、ホバー効果は機能しません。より良い図については、下の画像を参照してください。

ここに画像の説明を入力

以下は、リストの HTML と CSS です (HTML ではなく CSS に画像リンクがあります)。

HTML

<ul class="imagelist">
<li class="rollover_img" ><a title="" href="">
<span>Bla Bla Bla </span>
</a></li>

<li class="rollover_img"><a title="" href="">
<span>Bla Bla Bla </span>
</a></li>

<li class="rollover_img"><a title="" href="">
<span>Bla Bla Bla </span>
</a></li>
</ul>

CSS

.rollover_img {
width: 297px;
height: 150px;
background-position: top;
background-image: url(../images/homegallery/image2.png);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border: 3px solid #7E9ED2;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 18px 0;
}

.rollover_img a {
color: #fff;
width: 297px;
height: 150px;
display: block;
text-decoration: none;
}

.rollover_img a:hover {
background:#000;
opacity:.60;
filter:alpha(opacity=60);
}

.rollover_img a span {
display: none;
width: 280px;
padding:5px;
}

.rollover_img a:hover span {
display: block;
}

ul.imagelist {
width: 939px;
margin: 0 auto;
padding-top: 49px;
}

アイデアをお持ちの方は大歓迎です。ありがとう

4

2 に答える 2

2

その場合border-radiusはcssで画像を渡してください。CSS に以下のクラスを含め、padding:5px を削除しました。.rollover_img a span

.rollover_img a span img{
 border-radius:9px;
}

ここでデモをチェック

http://jsfiddle.net/2zDKP/

于 2012-09-26T11:21:55.667 に答える
1

idのインスタンスごとにを設定でき.rollover_imgます。このようにして、各リスト項目に異なる背景画像を設定できます。

HTML の例:

<li class="rollover_img" id="img01"><a title="" href="">
<span>Bla Bla Bla </span>
</a></li>

<li class="rollover_img" id="img02"><a title="" href="">
<span>Bla Bla Bla </span>
</a></li>

<li class="rollover_img" id="img03"><a title="" href="">
<span>Bla Bla Bla </span>
</a></li>

CSS の例:

#img01 { background-image: url('path/to/img01.jpg') }
#img02 { background-image: url('path/to/img02.jpg') }
#img03 { background-image: url('path/to/img03.jpg') }

いくつかのヒント：

  • 各画像の幅が同じになるようにしてください
  • overflow:hiddenコンテナに対して高すぎる画像を非表示にするために使用します
于 2012-09-26T11:13:51.897 に答える