码迷,mamicode.com
首页 > 其他好文 > 详细

background-clip实现渐变文字

时间:2020-05-03 18:22:02      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:near   splay   img   com   nic   inline   ima   break   tps   

实现思路

  • 渐变效果采用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查询结果传送门

background-clip实现渐变文字

标签:near   splay   img   com   nic   inline   ima   break   tps   

原文地址:https://www.cnblogs.com/zhangnan35/p/12822599.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!