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-radius 赋给 css 中的图像。我在你的 css 中包含了以下类，并从 .rollover_img a span

中删除了 padding:5px

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

在这里查看演示

http://jsfiddle.net/2zDKP/