设置渐变文本

效果图:

方法一

使用 -webkit-background-clip 结合 background-image 实现。

原理:

设置背景色,使用 -webkit-background-clip: text; 设置剪裁区域为文字,再对文字作透明处理即可。

透明处理可以使用 color-webkit-text-fill-color 属性。

天道酬勤
.text-gradient {
  display: inline-block;
  font-size: 10em;
  font-family: '微软雅黑';
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
  -webkit-background-clip: text;
  color: transparent;
}
天道酬勤
.text-gradient {
  display: inline-block;
  font-size: 10em;
  font-family: '微软雅黑';
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

兼容性

background-clip

看到: Firefox, Chrome and Safari support the unofficial -webkit-background-clip: text (only with prefix)

text-fill-color

看到,都需要带 -webkit- 前缀。

方法二

使用 mask-image

天道酬勤
.text-gradient3
  display: inline-block;
  font-family: '微软雅黑';
  font-size: 5em;
  position: relative;
  &[data-text]::after
    content: attr(data-text);
    color: green;
    position: absolute;
    left: 0;
    z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
<h2 class="text-gradient" data-text="天道酬勤">天道酬勤</h2>

兼容性

可以看到 mask-image 兼容性并不好,不推荐使用。

参考资料

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress