Css遮罩字体

曾鱼哥

于 2021-02-07 14:41:15 发布

阅读量989

点赞数

文章标签： css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/BL1309639668/article/details/113740833

版权

这篇博客介绍了如何利用CSS的background-clip和text-fill-color属性创建一个独特的设计效果，将图片置入文字内部，使得文字呈现出由图片构成的视觉效果。通过设置文本大小、居中对齐以及透明度，实现了文字与背景图片的完美融合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Css遮罩字体

要做的效果如下：类似图片放到文字里边的效果
在这里插入图片描述

首先html部分如下，给body一个背景颜色，在里面放一个div，给div一个id，在div里面放一个h1文本。
在这里插入图片描述

Css部分如下，先给文本设置一些基础样式，选择到h1，给它设置文本大小200px，文本居中，还有一些忽略，
在这里插入图片描述

接下来就是给div一个背景图片，使用background-clip来剪裁图片，让图片只显示文字的形状，
然后通过text-fill-color设置transparent把文字设置透明，把图片显示出来就好了。
在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。