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

https://juejin.cn/ 发布时间：2024-11-17 16:35:10 作者：_XU

在 Web 开发中，文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧，我们可以创造出许多独特的效果，例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空效果，结合背景图片、渐变以及 CSS 属性，来为你的网页增添视觉冲击力

1. 代码解析

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

HTML 结构

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

这里我们简单地创建了一个 div 元素，其中包含一个 span 标签用于承载文本“文字镂空效果”。span 标签用于实现文字镂空的样式效果，外层的 div 则主要负责设置背景遮罩。

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;
}

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

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

- height: 100%：mask 容器的高度占满父容器（即视口的高度）。
- background: rgba(0, 0, 0, 0.7)：给 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;
}

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

2. 文字镂空效果的原理

通过 CSS 的 background-clip: text 属性，我们可以将背景图像限制在文本的区域内。当我们将 color 设置为透明时，文字区域内就会显示出背景图。-webkit-text-stroke 用于给文字添加一个白色边框，使得镂空效果更加明显，避免文字与背景图过于融合。

这种效果的核心原理就是通过将文字区域的颜色透明化，同时应用背景图片和 background-clip 来让文字区域的背景图穿透显示出来，形成一种视觉上“镂空”的效果。

总结

通过简单的 HTML 和 CSS 技巧，我们可以轻松实现文字镂空效果。此效果不仅提升了文本的视觉吸引力，还能有效地展示背景图像或其他装饰性元素。掌握这种技术，可以为你的网页设计增添更多创意和视觉冲击力。

以上就是使用HTML和CSS实现文字镂空效果的代码示例的详细内容，更多关于HTML CSS文字镂空的资料请关注脚本之家其它相关文章！

Tag：HTML css 文字镂空

html+css实现文字折叠特效实例
最近在学习html+css，于是整理了一下思路，写了一个小demo，本文主要介绍了html+css实现文字折叠特效实例，感兴趣的小伙伴们可以参考一下
2021-06-01
纯css实现（无脚本）Html指令式tooltip文字提示效果
这篇文章主要介绍了纯css实现（无脚本）Html指令式tooltip文字提示效果,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2019-07-17
Html+css实现纯文字和带图标的按钮
这篇文章主要介绍了Html+css实现纯文字和带图标按钮的方法，按钮有很多种外观，本文介绍了纯文字和带图标两种按钮，感兴趣的小伙伴们可以参考一下
2016-02-24
通过css控制HTML文本框中的文字垂直居中
当定义了 Text 的 height 属性时，在 Text 中输入的文字都不是垂直居中的，不过可以通过css来控制它，下面有个不错的示例，大家可以参考下
2014-02-18

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

1. 代码解析

HTML 结构

CSS 样式

详细解释：

2. 文字镂空效果的原理

总结

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容