css实现文字镂空和遮罩效果（background-clip或者 -webkit-text-stroke）

最新推荐文章于 2025-06-22 17:47:56 发布

YouZi_X

最新推荐文章于 2025-06-22 17:47:56 发布

阅读量8.8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：渐变文字镂空

本文链接：https://blog.youkuaiyun.com/YouZi_X/article/details/88180189

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS的background-clip属性，用于控制背景的绘制区域，包括border-box、padding-box和content-box等选项。此外，还介绍了如何通过-webkit-background-clip和-webkit-text-fill-color属性实现文字镂空效果，以及如何使用-webkit-mask-image创建遮罩效果。

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

background-clip定义和用法

background-clip 属性规定背景的绘制区域。

默认值：	border-box
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.backgroundClip="content-box"

语法

background-clip: border-box|padding-box|content-box;

值	描述
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

文字镂空效果

除上面几个属性值之外，还有一个属性值：

 -webkit-background-clip: text;

描述：裁减掉文字以外的背景。效果如下：

如果只有裁剪，无法实现上图所示效果。搭配上另外一个css属性使的字体透明显现背景图，即可完成。

-webkit-text-fill-color: transparent;//设置文字填充色为透明
//color:transparent;

~~考虑到color的继承性和应用范围，建议使用-webkit-text-fill-color只作用于字体。~~

代码如下：

css：

.mt-text {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: url(./img/1.jpg);
	background-repeat: no-repeat;
	border: 2px dashed;
}

html：

<div class="mt-text">hello MT</div>

同样，将底图颜色设置成渐变，即实现字体颜色渐变效果。

css渐变

-webkit-text-stroke

.hollow{
    -webkit-text-stroke: 3px #000;
    color: transparent;
}

遮罩

-webkit-mask-image

html

<div class="lable">MARK</div>

css

.lable{
    -webkit-mask-image: url(./img/txtpattern.png);
    border: 4px solid;
}

效果

底图

或