[分享]css中如何让格子位于图片上

在CSS中，我们可以用不同的技巧来实现让格子位于图片上的效果。以下是一些常用的方法：

.grid {
  position: relative;
  display: inline-block;
}

.grid img {
  display: block;
  max-width: 100%;
  height: auto;
}

.grid:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色用于遮盖图片 */
  z-index: 1;
}

.grid .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 将内容居中 */
  z-index: 2;
} 

上述代码将会创建一个容器来放置格子和图片。我们使用position:relative属性指定容器的相对定位，使得后面需要绝对定位的元素可以参照此容器进行定位。

接下来，我们将图片设为块级元素，并设置max-width:100%;height:auto来使得图片宽度最大为容器的宽度。同时，我们使用: before伪元素并设置其为绝对定位来遮盖图片，创建半透明的黑色区域，以达到使格子可以放置在图片上的效果。

最后，我们使用position: absolute和transform属性来将格子居中，并设置其为 z-index: 2来使其显示在图片的上方。