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

如果您想在图像上使用圆角，请执行以下操作：

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

您可以更改半径及其影响的元素。

Answer 2

将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 3

问题是双重的：

当你提高a的z-index时，你也会提高其子项的z-index，这样你实际上就没有做任何事情了。降低img标记的z-index应该这样做。
z-index仅适用于定位的元素。因此，您需要将position:relative添加到您添加z-index的任何内容中（假设它当然没有位置）。

如何z-index父母的背景

3 个答案: