显示到div中图片前面的div

，可以通过CSS的定位属性和层叠顺序来实现。具体的做法是在图片所在的div之前插入一个新的div，并设置其样式为透明背景色或者其他需要的样式。

以下是一个示例的HTML和CSS代码：

HTML代码：

<div class="container">
  <div class="image-wrapper">
    <img src="image.jpg" alt="图片">
  </div>
  <div class="overlay"></div>
</div>

CSS代码：

.container {
  position: relative;
}

.image-wrapper {
  position: relative;
  z-index: 1;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置为透明背景色 */
  z-index: 2;
}

在上述代码中，.container是包含图片和遮罩层的父容器，设置为相对定位。.image-wrapper是图片所在的div，设置为相对定位，并设置z-index为1，确保图片在遮罩层之上。.overlay是遮罩层的div，设置为绝对定位，覆盖在图片之上，并设置z-index为2，确保遮罩层显示在图片前面。

你可以根据需要修改遮罩层的样式，例如调整背景色、透明度等。这个方法适用于在图片前面添加任何类型的div，不仅限于遮罩层。