ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css设置字体渐变色

2021-06-09 09:33:48  阅读:185  来源: 互联网

标签:gradient 渐变色 image color 字体 background text webkit css


参考  https://www.cnblogs.com/ypppt/p/13334613.html

我设置的第一种

 

    1. background: linear-gradient(to right, red, blue);
    2. -webkit-background-clip: text;
    3. color: transparent;

网上说的

.gradient-text-one{ 

    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);     -webkit-background-clip:text;     -webkit-text-fill-color:transparent; } background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
webkit-text-fill-color: transparent 使用透明颜色填充文本。 
webkit-background-clip: text 用文本剪辑背景,用渐变背景作为颜色填充文本。   第二种 .gradient-text-two{    color:red; } .gradient-text-two[data-content]::after{     content:attr(data-content);     display: block;     position:absolute;     color:yellow;     left:0;     top:0;     z-index:2;     -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0))); } mask-image 和 background-image 一样,不仅可以取值是 图片路径,也可以是渐变色。      

标签:gradient,渐变色,image,color,字体,background,text,webkit,css
来源: https://www.cnblogs.com/wdd-cindy/p/14865523.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有