回到顶部

「 初音未来：歌姬计划 Mega39's+\游戏档案馆 」2023-06-07 「 戴拿&盖亚奥特曼\皮套摄影 」2024-08-02 「 宝可梦：白金\游戏档案馆 」2023-08-06 「 闪焰王牌/模玩摄影 」2024-08-06 「 多龙巴鲁托\模玩摄影 」2023-06-05 「 泽塔奥特曼\皮套摄影 」2023-06-07 「 阿尔宙斯\模玩摄影 」2023-06-07

Html5文字设置渐变色 #79

Anuluca Date : 2020-11-16 Tags : 2

注意：该方法目前只适用于webkit内核

实现案例(同时适用于自定义字体)

❤ RABBIT TANK SPARKLING ❤

css代码

.KamenriderBuild{
  background:linear-gradient(to right,red,blue);
  -webkit-background-clip:text;
  color:transparent;
}

实现原理

1、background:linear-gradient给背景图片设置背景色渐变
2、-webkit-background-clip将背景图片设置为当前文字内容的蒙版
3、color:transparent将文字颜色设为透明，展示出背景图片

由于某些原因，博客图床于5月26日惨遭爆破，目前正在整理需要的图片并迁移存活的图片到新图床,预计6月10日重新上线网站

THE END

讨论

Anuluca

Update:2020-11-16

CSS web前端

...

推特 ( 𝕏 )

Bilibili

微博

Github

裏

表

笔记

Javascript/CSS

Vue/React

其它

杂物室

杂谈

工具

影像

Html5文字设置渐变色 #79

注意：该方法目前只适用于webkit内核

实现案例(同时适用于自定义字体)

css代码

实现原理