html z-index中的图像标签可以在css背景图像后面吗？答案

【问题标题】：Can a image tag in html z-index behind a css background image?html z-index中的图像标签可以在css背景图像后面吗？
【发布时间】：2011-08-26 13:03:17
【问题描述】：

我在我的 img 标签前面有一个我想要的 css 背景图像。 css 背景图像的 z-index 为 1，img 标签的 z-index 为 0。我是否允许将 img 标签放在带有 z-index 的 css 背景后面，或者 css 背景总是在后面img 标签不管它的 z-index 吗？

【问题讨论】：

【解决方案1】：

当然，具有background-image 和更高z-index 的HTML 元素可以覆盖任何其他HTML 元素，在您的例子中是一个简单的<img /> 标记。但是<img>标签不必嵌套在保存背景图片的标签中。

这会起作用

<img src="../image.jpg" />
<div style="background: url(../image2.gif); z-index: 1">Content</div>

这不是：

<div style="background: url(../image2.gif); z-index: 1">
    <img src="../imag.jpg" />
</div>

【讨论】：

【解决方案2】：

如果您将位置设置为相对或绝对，它会起作用。请务必设置它，因为它可能只是被继承。

【讨论】：

【解决方案3】：

使用 2 个带有背景图像的 div 或 div 并将每个 div/图像设置为 z-index

【讨论】：

【解决方案4】：

如果您可以显示一些代码来了解您想要做什么，那将会很有用。如果您只想在另一个前面显示图像，请使用 2 个容器，例如 Div 或 Span..

<div id="image1">
    <span id="image2"></span>
</div>

【讨论】：