CSS Grid实现7项网格带背景图半透明遮罩文本居中与角落定位问题

1. 文本不居中的核心问题：你给grid-item设置的flex居中规则仅作用于它的直接子元素（即半透明遮罩span），而span本身为普通块级元素，未设置任何居中规则；你给h1添加的justify-self/align-self是Grid布局专属属性，在非Grid父容器下不生效，因此h1会按默认流排版，无法居中。
2. 绝对定位不生效的核心问题：absolute定位需要父级元素设置非static的position属性作为定位上下文，你没有给grid-item设置position: relative，所以定位元素会相对于整个文档流偏移，不符合预期。

基础居中布局实现 #

将遮罩层也设置为flex布局实现内部文本居中，同时抽离公共样式方便深色模式适配，代码如下：

grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 14vw;
  gap: 0;
}

grid-item {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 半透明遮罩 */
.grid-mask {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
}

/* 深色模式适配，调暗背景 */
@media (prefers-color-scheme: dark) {
  .grid-mask {
    background-color: rgba(0, 0, 0, 0.65);
  }
}

.grid-title {
  color: #fff;
  font-size: 42px;
  margin: 0;
}

HTML结构简化为：

<grid-container>
  <grid-item style="background-image: url('背景图地址')">
    <div class="grid-mask">
      <h1 class="grid-title">Monday</h1>
    </div>
  </grid-item>
  <!-- 剩余周二到周日的网格项复用上述结构即可 -->
</grid-container>

角落固定文本实现 #

给grid-item设置了position: relative后，直接对需要定位的文本设置absolute属性即可，示例样式：

/* 左上角固定文本 */
.top-left-title {
  position: absolute;
  top: 12px;
  left: 12px;
  color: #fff;
  font-size: 24px;
  margin: 0;
}

/* 右下角固定文本 */
.bottom-right-title {
  position: absolute;
  bottom: 12px;
  right: 12px;
  color: #fff;
  font-size: 24px;
  margin: 0;
}

内容的提问来源于stack exchange，提问作者user1827421