如何用CSS实现文字透明但容器背景不透明，显示父元素背景？

这个需求其实很常见，用CSS的background-clip属性就能轻松搞定，我给你详细说下实现方法：

核心思路 #

我们需要让.text-div的文字区域变成“镂空”效果，透过文字显示父元素的背景图，同时保留.text-div自身的橙色背景。关键是利用background-clip: text将背景图仅裁剪到文字区域，再配合透明文字颜色来实现。

修改后的代码示例 #

CSS 样式

.parent-div {
  background-image: url('path/to/image'); /* 注意路径统一用正斜杠 */
  background-size: cover;
  /* 给父元素设置宽高，确保背景图和子元素能正常显示 */
  width: 500px;
  height: 300px;
}

.text-div {
  background-color: orange;
  padding: 20px;
  font-size: 48px; /* 放大文字让效果更明显 */
  font-weight: bold;
  
  /* 核心实现代码 */
  color: transparent; /* 让文字本身透明 */
  background-image: url('path/to/image'); /* 复用父元素的背景图 */
  background-size: cover;
  background-clip: text; /* 将背景裁剪到文字区域 */
  -webkit-background-clip: text; /* 兼容Chrome、Safari等webkit内核浏览器 */
  
  /* 可选：给文字加描边，让镂空效果更清晰 */
  -webkit-text-stroke: 1px #333;
}

HTML 结构

<div class="parent-div">
  <div class="text-div">Welcome!</div>
</div>

原理说明 #

1. 给.text-div设置和父元素完全相同的背景图，确保文字透出的背景和父元素一致
2. background-clip: text会把背景图只渲染在文字的轮廓范围内
3. 将文字颜色设为transparent，隐藏原本的文字颜色，只显示裁剪后的背景图部分，视觉上就像文字“透出”了父元素的背景
4. .text-div的橙色背景会正常显示在文字以外的区域，完全不受文字透明设置的影响

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