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

Question

我想在 img 标签前面放置一个 css 背景图像。 css 背景图像的 z 索引为 1，img 标签的 z 索引为 0。我是否可以将 img 标签放在带有 z 索引的 css 背景后面，或者 css 背景始终位于img 标签不管它的 z-index 吗？

Answer 1

当然，具有 background-image 和较高 z-index 的 HTML 元素可以覆盖任何其他 HTML 元素，在您的情况下是一个简单的 ; 标签。但是 标签不必嵌套在保存背景图像的标签内。

这不会起作用

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

Answer 2

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

Answer 3

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

Answer 4

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

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