как z-index родительский фон

Question

Итак, вот что я пытаюсь сделать.

<div class="gallery">
<a href="link_to_large_image.jpg" style="z-index:2; position:relative; background: url(roundedcorners.jpg) norepeat;">
<img src="thumbnail.jpg" style="z-index:1; position:relative;" />
</a>
</div>

В галерее я пытаюсь разместить тег <a> (и его фон), который является родителем <img>тег сверху z-index.Таким образом, я могу добавить закругленные углы к изображениям.

Но похоже, что независимо от того, что я делаю, он помещает фон <a> (который является закругленными углами) под изображением.

Кто-нибудь знает исправление?Вот ссылка http://ewsbuild.com/~markdemi/gallery.html

Answer 1

Поместите Div внутри тега и примените следующий стиль к каждому div.

background: url("images/gallery/Giallo-Sienna-Fireplace.jpg") no-repeat scroll 0 0 transparent;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
height: 153px;

Answer 2

Если вы хотите, чтобы на изображениях были закругленные углы, просто выполните:

.lightbox{
    border-radius:15px;
    -moz-border-radius:15px;
}

Вы можете изменить радиус и, на какие элементы он влияет, конечно.

Answer 3

Проблема двоякая:

• Когда вы поднимаете z-индекс a, вы также поднимаете z-индекс его дочерних элементов, так что вы фактически ничего не делаете, делая это. Понижение z-индекса тега img должно сделать это.
• z-index применяется только к позиционированным элементам. Поэтому вам нужно добавить position:relative ко всему, к чему вы добавляете z-индекс (при условии, что у него, конечно, еще нет позиции).