CSS background-clip: text 实现文字镂空效果：代码与原理详解

脚本专家 · 发表于昨天 19:00

在网页设计中，文字镂空是一种让背景图像或纹理通过文字内部显示出来的视觉效果，常用于品牌展示、标题装饰等场景。本文将通过一个完整的 HTML + CSS 示例，解析如何利用 background-clip 属性实现这一效果，并详细说明各参数的作用。

<body>
<div class="mask">
<span class="text">文字镂空效果</span>
</div>
</body>

复制代码

HTML 部分简洁：外层 div.mask 充当遮罩容器，内层 span 承载文本。关键样式均集中在 CSS 中。

/* CSS 样式 */
body {
margin: 0;
height: 100vh;
background: url(./img.jpeg) no-repeat center/cover;
}
.mask {
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
.mask span {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24vh;
font-weight: bold;
-webkit-text-stroke: 1px #fff;
background: url(./img.jpeg) no-repeat center/cover;
color: transparent;
background-clip: text;
}

复制代码

各段样式作用解析：

1. body 设置全屏背景图像（100vh 高度），使用 no-repeat center/cover 确保图片居中覆盖整个视口。margin: 0 去除浏览器默认边距。

2. .mask 容器高度继承 body（100%），并叠加一层半透明黑色背景（rgba(0,0,0,0.7)）。这个遮罩层让文字以外的区域呈现暗色，凸显文字镂空部分。

3. .mask span 是镂空效果的核心：
- display: flex + justify-content: center / align-items: center 实现文本水平和垂直居中。
- font-size: 24vh 使字号随视口高度动态缩放。
- -webkit-text-stroke: 1px #fff 为文字添加白色描边（仅 WebKit 内核浏览器生效，如 Chrome、Safari），增强轮廓辨识度。
- background 属性重复使用了与 body 相同的图片路径，保证文字内部显示的背景图与外层一致。
- color: transparent 将文字本身颜色设为透明，使文字区域“消失”，露出背后的背景图。
- background-clip: text 是灵魂属性：它将背景裁剪到文字字符形状内，背景图像仅显示在文字笔画覆盖的区域，其余部分透明。

实现原理：当 background-clip: text 与 color: transparent 配合时，文字区域变为“窗口”，背景图像通过这个窗口呈现，形成类似镂空或雕刻的效果。白色描边则防止文字与背景完全融合，提升可读性。

兼容性提示：background-clip: text 是标准属性，现代浏览器（Chrome 66+、Firefox 49+、Edge 79+）已支持。旧版 WebKit 浏览器可能需要添加 -webkit-background-clip: text 作为后备。实际测试建议在目标浏览器中验证。

适用场景：该技术非常适合在首屏大标题、活动宣传页、创意博客封面等位置使用，能够在不增加图片资源的情况下，让文字与背景产生互动，提升视觉层次感。

热心网友5 · 发表于昨天 19:10

这个示例写得很清晰，特别是对各段 CSS 作用的分步解析，让初学者能快速理解 background-clip: text 的配合逻辑。不过有个小细节值得注意：`.mask span` 里 `width: 100%; height: 100%;` 对 inline 元素（span）默认不生效，这里写了 display: flex 后 span 变成了块级弹性容器，所以能正常撑满父级，但如果是其他布局场景可能需要显式设置 display: block 或 inline-block。另外 `-webkit-text-stroke` 虽然主流 WebKit 浏览器支持，但在 Firefox 上也能生效（Firefox 自 2020 年起已支持该属性），所以实际兼容性比文中所说的更广一点。整体来说很适合做学习参考，感谢分享！

CSS background-clip: text 实现文字镂空效果：代码与原理详解

Re: CSS background-clip: text 实现文字镂空效果：代码与原理详解

指导单位

旗下站点

联系我们