CSS如何实现黑色div镂空文字 透出祖父层渐变背景效果

核心原理 #

要实现黑色层文字为镂空孔洞、直接透出底层祖父容器渐变的效果，本质是让黑色父容器仅在文字轮廓区域完全透明，其余区域保持纯黑，不需要给文字单独填充渐变背景，属于真镂空实现，后续在镂空区域下方加动效、交互都不受影响。 #

前置问题修复 #

现有代码存在基础类名不匹配问题：JSX中外层渐变容器的className为grad，但CSS中对应类名写为.gradient，会导致渐变样式不生效，需要先统一类名。 #

最终实现代码 #

CSS部分 #

/* 全局渐变变量，可自行调整色值、渐变方向 */
:root {
  --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.grad {
  overflow: hidden;
  height: 92vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: var(--gradient);
  /* 创建独立层叠上下文，避免遮罩效果溢出容器 */
  isolation: isolate;
  position: relative;
}

.black {
  overflow: hidden;
  height: 88vh;
  width: 98vw;
  position: relative;
  /* 核心：通过SVG遮罩实现文字镂空，遮罩透明区域对应文字形状，直接透出底层渐变 */
  -webkit-mask: url(#textMask) no-repeat center / contain;
  mask: url(#textMask) no-repeat center / contain;
  background-color: #000000;
}

.wallText {
  display: none; /* 镂空文字已在SVG遮罩中定义，原有p标签默认隐藏，也可保留用于动态同步文字内容 */
}

JSX部分 #

在最外层渐变容器内加入内联SVG遮罩，遮罩内定义要镂空的文字内容，后续修改镂空文字直接调整SVG内text标签属性即可：

return (
  <div className='grad'>
    {/* 内联SVG遮罩，无需额外引入文件 */}
    <svg width="0" height="0" style={{position: 'absolute'}}>
      <defs>
        <mask id="textMask">
          {/* 遮罩规则：白色区域显示黑色背景，黑色区域为透明（镂空透出渐变） */}
          <rect width="100%" height="100%" fill="white"/>
          <text 
            x="50%" y="50%" 
            textAnchor="middle" 
            dominantBaseline="middle" 
            fontWeight="800" 
            fontSize="18vh"
          >
            WALL
          </text>
        </mask>
      </defs>
    </svg>
    <div className="black">
      <p className="wallText">WALL</p>
      {/* 后续留言内容直接添加在.black容器内即可，会正常显示在黑色背景上，不受镂空效果影响 */}
    </div>
  </div>
)

方案说明 #

• 遮罩实现的是物理镂空效果，文字区域完全穿透黑色父层，直接显示祖父层的渐变，不是给文字填充渐变的模拟效果，完全匹配需求
• 镂空文字的字号、字重、内容、字体都可以通过修改SVG内<text>标签的属性自由调整
• 兼容性覆盖Chrome、Firefox、Safari等所有现代浏览器
• 可选优化：如果需要做动态墙标题功能，可以通过JS把.wallText的文字内容、字号实时同步到SVG的text节点，实现动态镂空效果

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