css - 我可以在 <div> 顶部添加图像而不添加任何 html 标签吗？

Question

假设我们有

<div class="picture"><img class="picture_thumb" src="path" /> </div>

我想使用 CSS 将图像 z-index 添加到 .picture 中(它基本上是一个放大镜图标，所以我可以在顶部看到它.picture_thumb)

有机会吗？

非常感谢

PD:它会像一个 Front-ground 而不是背景 -编辑- 一张图让你更好理解

Answer 1

没有前台这样的东西。

你必须这样做:

<div class="picture">
  <img src="images/picture.jpg" alt="Picture" />
  <img class="magnifier" src="images/magnifier.jpg" alt="Maginfy" />
</div>

.picture {
  position: relative;
  width: 100px;
  height: 100px;
}

.magnifier {
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 1000;
}

如果您不想将放大镜图像添加到每个图片 div，您也可以使用 javascript 来实现。