background-clip实现渐变文字

Posted 2021-02-20 zhangnan35

实现思路

• 渐变效果采用linear-gradient实现，但是它只能设在background-image属性上
• background-clip的含义是背景图片切割，当值设为text时，背景图片将根据文字轮廓进行切割
• 切割完成后，切割好的新背景图片被挡在文字下方，将文字的颜色设为透明即可让根据文字轮廓切割的背景图显露出来
• 这个属性兼容性非常不错，但是偏偏在webkit内核下一定要加前缀才生效

代码

注：以下为vue代码，如果你在工程项目中设置了postcss自动添加浏览器前缀(autoprefixer)，此处可以不添加-webkit前缀；否则，必须添加。

<template>
  <div>
    <h1>loaning-moon</h1>
  </div>
</template>

<style lang="less" scoped>
h1 {
  font-size: 60px;
  background-image: linear-gradient(to bottom, red, yellow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
</style>

效果

关于兼容性

我尝试了火狐，谷歌，safari，手机QQ浏览器，手机百度浏览器，安卓自带浏览器，均能正常显示。从Can I use官方查询的数据来看，连ie也能正常使用，所以我认为这个属性的兼容性是非常不错，可以放心使用，唯独要注意-webkit前缀的问题。

Can I use查询结果传送门