如何为单个CSS Grid单元格添加多个半透明背景并融合显示

问题核心是直接设置background会覆盖原有背景，导致hover效果和自定义背景无法融合。以下是两种实用的解决方法：

方法一：利用伪元素实现叠加高亮层 #

给单元格添加一个绝对定位的伪元素，hover时显示半透明高亮层，该层会叠加在原有背景之上，完美融合两种效果：

.cell {
  position: relative;
  /* 保留你的Grid布局、padding、颜色等其他样式 */
  padding: 1rem;
}

/* 伪元素作为高亮容器，默认透明 */
.cell::after {
  content: "";
  position: absolute;
  inset: 0; /* 等同于top/right/bottom/left: 0 */
  background: transparent;
  pointer-events: none; /* 不干扰单元格内元素的交互 */
  z-index: 1; /* 确保高亮层在内容下方、背景上方 */
}

.cell:hover::after {
  background: #8888; /* hover时显示半透明灰色 */
}

.bg-danger {
  background: #f008; /* 自定义背景不受影响 */
}

对应的HTML保持不变：

<div class="cell bg-danger">
    Highlighted Cell
</div>
<div class="cell">Cell</div>

这种方法兼容性强，且不需要修改原有背景的设置逻辑，hover层独立于单元格背景，自然融合两种半透明效果。

方法二：使用CSS变量与多层背景 #

通过自定义CSS变量存储单元格的背景值，hover时使用多层背景叠加效果：

.cell {
  /* 定义默认背景变量 */
  --cell-bg: transparent;
  background: var(--cell-bg);
  padding: 1rem;
}

.cell:hover {
  /* 叠加hover高亮层与原有背景 */
  background: #8888, var(--cell-bg);
  background-blend-mode: overlay; /* 可选混合模式，可根据视觉需求调整为multiply/screen等 */
}

.bg-danger {
  --cell-bg: #f008; /* 自定义背景赋值给变量 */
}

这种方法更简洁，适合不需要复杂层级的场景，通过调整background-blend-mode可以获得不同的视觉融合效果。

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