likes
comments
collection
share

CSS 文字渐变填坑技巧

作者站长头像
站长
· 阅读数 33

1. 使用 background-clip 实现文字渐变

1.1 实现方案

CSS 文字渐变填坑技巧

如上图所示,background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。

CSS 文字渐变填坑技巧

使用background-clip: text;可以实现背景(背景图片或颜色)被裁减为文字的前景色,但是如果文字设置颜色,则无法生效,如左 1 所示,仍然显示文字颜色。

这时,可以将文字设置为透明,但考虑到兼容性问题,在部分浏览器如果background-clip无法生效且文字设置为透明,则会导致文字丢失。这时可以考虑用-webkit-text-fill-color,此属性的优先级大于color,可以指定文本的填充颜色,如左 2 所示。

最后一步便是将背景图片设置为线性渐变,可以使用 linear-gradient,如右 1 所示。

完整的 css 代码如下:

background-image: linear-gradient(to bottom, #ec428c, #32d1d3); // 背景线性渐变
color: #ffffff; // 兜底颜色,防止文字裁剪不生效
background-clip: text;
-webkit-background-clip: text; // 背景被裁减为文字的前景色
-webkit-text-fill-color: transparent; // 文字填充为透明,优先级比color高。

1.2 踩坑 1: 线性渐变字体消失

在低端 ios 机型上,出现过线性渐变字体消失的问题,排查发现是因为background-clip 无法 display: flex布局下生效。所以开发过程中务必做好兜底,防止这两种样式出现在同一个 dom 上。

1.3 踩坑 2: 线性渐变字体在部分 ios 机型上出现竖线

使用这种方式实现线性渐变,在部分 ios 机型上会出现奇怪的竖线,可以将背景设置为no-repeat,并适当缩小。

background-repeat: no-repeat;
background-size: 98% 98%;
background-position: 50% 50%;

2. 使用 -webkit-mask 实现文字渐变

CSS 文字渐变填坑技巧

-webkit-mask借鉴了蒙版的概念,在图片上实现了一定的遮罩效果。有图片蒙版和渐变蒙版两种写法,如上图所示,使用-webkit-mask: linear-gradient(to bottom, #000000,transparent);创建从上到下从黑色到透明的蒙版遮罩图片,黑色部分会完全显示,透明部分会遮罩。

CSS 文字渐变填坑技巧

基于这个原理,可以实现文字渐变效果,如上图所示,利用:after的原理,在文字上方叠加一层相同的文字,然后利用-webkit-mask: linear-gradient(to bottom, #000000,transparent);线性渐变遮罩一半的文字,就实现了两种颜色渐变。

具体的代码参考如下:

.title {
	position: relative;
	color: #ec428c;

	&::after {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		color: #32d1d3;
		-webkit-mask: linear-gradient(to bottom, transparent, #000);
		white-space: nowrap;
	}
}
<div class="title" data-text="文字渐变">文字渐变</div>

该方法的缺点是只能实现两种颜色渐变。