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

Posted 2023-03-05

【中文标题】html z-index中的图像标签可以在css背景图像后面吗？

【英文标题】：Can a image tag in html z-index behind a css background image?

【发布时间】：2011-08-26 13:03:17

【问题描述】：

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

【问题讨论】：

我认为...如果您将图像设置为背景。您无法增加 z-index。为什么不使用两个 标签

请举个你说的代码示例

@Anish - 他的意思是一个带有背景的元素，里面包含 。它可以完成并且它是有效的，只要确保你没有把它放在 标签后面。

【参考方案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>