html - 使用选择的不同图像时 css 和 html 中的翻转图像问题

Question

我在我的一个网页上创建了一个图像列表，当将鼠标悬停在它上面时，它会失去一点不透明度并在图像顶部显示文本。但是，我只能通过 CSS 来实现这一点，这意味着我只能将一个图像链接到该类，这意味着我必须拥有相同的图像，请参见下图以获得更好的说明：

我尝试的是从 CSS 中取出图像链接并将其放入每个列表项中，每个列表项都有不同的图像（这是我想要的）。但随后图像在边框内显示不佳，悬停效果不起作用，请参见下图以获得更好的说明：

下面是我的列表的 HTML 和 CSS（在 CSS 中而不是在 HTML 中带有图像链接）：

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;
}

任何有任何想法的人将不胜感激。谢谢

Answer 1

在这种情况下，给border-radiuscss 中的图像。我已在您的 css 中包含以下类并从.rollover_img a span

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

在这里查看演示

http://jsfiddle.net/2zDKP/

Answer 2

您可以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隐藏那些对您的容器来说太高的图像