Проблема с опрокидыванием изображения в 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

Вы можете установить 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') } 

Некоторые советы:

• Try иметь одинаковую ширину для каждого изображения
• использования overflow:hidden, чтобы скрыть те изображения, которые слишком высоки для вашего контейнера

Answer 2

В этом случае укажите border-radius изображению в css. Я включил ниже classin ваш CSS и удалите отступы: 5px из .rollover_img a span

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

Проверить демку здесь

http://jsfiddle.net/2zDKP/