福建二哥 › 门户 › 查看主题

使用HTML和CSS实现文字镂空效果的代码示例

发布者: 怀142 | 发布时间: 2025-8-17 01:29| 查看数: 7| 评论数: 0|帖子模式

1. 代码解析

在本例中，我们将通过 HTML 和 CSS 实现一个文字镂空的效果，同时加入一个背景图片，使得背景内容能够透过文字显示出来。
HTML 结构

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

复制代码

这里我们简单地创建了一个

复制代码

元素，其中包含一个

span

复制代码

标签用于承载文本“文字镂空效果”。

span

复制代码

标签用于实现文字镂空的样式效果，外层的

复制代码

则主要负责设置背景遮罩。
CSS 样式

body {
margin: 0;
height: 100vh;
background: url(./img.jpeg) no-repeat center/cover;
}
.mask {
margin: 0;
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;
}

复制代码

详细解释：

body
复制代码
样式：

body {
margin: 0;
height: 100vh;
background: url(./img.jpeg) no-repeat center/cover;
}

复制代码

- 1. margin: 0
  复制代码
  ：去除浏览器默认的页面边距，确保页面内容从顶部和两侧开始填充。
- 1. height: 100vh
  复制代码
  ：使
  1. body
  复制代码
  元素的高度占满整个视口（100vh 表示 100% 的视口高度）。
- 1. background: url(./img.jpeg) no-repeat center/cover
  复制代码
  ：设置页面背景图片，图片的路径为
  1. ./img.jpeg
  复制代码
  ，图片不会重复，且背景居中显示，覆盖整个容器。
.mask
复制代码
样式：

.mask {
height: 100%;
background: rgba(0, 0, 0, 0.7);
}

复制代码

- 1. height: 100%
  复制代码
  ：
  1. mask
  复制代码
  容器的高度占满父容器（即视口的高度）。
- 1. background: rgba(0, 0, 0, 0.7)
  复制代码
  ：给
  1. mask
  复制代码
  容器设置一个半透明的黑色背景，增加文字的可见性。
.mask span
复制代码
样式：

.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. justify-content: center
  复制代码
  和
  1. align-items: center
  复制代码
  ：使
  1. span
  复制代码
  标签中的文本水平和垂直居中。
- 1. font-size: 24vh
  复制代码
  ：这样设置可以使文字跟随视窗大小进行变化。
- 1. -webkit-text-stroke: 1px #fff
  复制代码
  ：给文字添加白色的边框，增加文字的轮廓感。这个属性目前主要在 Webkit 内核浏览器（如 Chrome 和 Safari）中生效。
- 1. background: url(./img.jpeg) no-repeat center/cover
  复制代码
  ：为文字设置背景图片，使得背景图覆盖在文字区域。
- 1. color: transparent
  复制代码
  ：将文字的默认颜色设置为透明，使文字区域看起来像镂空，透过文字能够看到背景图。
- 1. background-clip: text
  复制代码
  ：这是实现文字镂空效果的关键属性。该属性将背景裁剪到文字区域，使得背景图片仅在文字内部可见，文字外部则不会有任何背景显示。

2. 文字镂空效果的原理

通过 CSS 的

background-clip: text

复制代码

属性，我们可以将背景图像限制在文本的区域内。当我们将

color

复制代码

设置为透明时，文字区域内就会显示出背景图。

-webkit-text-stroke

复制代码

用于给文字添加一个白色边框，使得镂空效果更加明显，避免文字与背景图过于融合。
这种效果的核心原理就是通过将文字区域的颜色透明化，同时应用背景图片和

background-clip

复制代码

来让文字区域的背景图穿透显示出来，形成一种视觉上“镂空”的效果。
总结

通过简单的 HTML 和 CSS 技巧，我们可以轻松实现文字镂空效果。此效果不仅提升了文本的视觉吸引力，还能有效地展示背景图像或其他装饰性元素。掌握这种技术，可以为你的网页设计增添更多创意和视觉冲击力。
以上就是使用HTML和CSS实现文字镂空效果的代码示例的详细内容，更多关于HTML CSS文字镂空的资料请关注脚本之家其它相关文章！

来源：互联网
免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要登录才可以下载或查看，没有账号？立即注册

浏览过的版块

计算机整机

使用HTML和CSS实现文字镂空效果的代码示例

本帖子中包含更多资源

最新评论

浏览过的版块

新人须知

常见问题

维权申诉

关注微博

扫描微信

关于合作

通讯联系