本WIKI于2020.07.21由往事仇心创建,2021.12.25正式建组“空桑档案馆”,编辑权限逐步开放,建议各位少主收藏。
目前正在搭建基础框架与美工优化,欢迎翻阅已开放区域,并提出宝贵建议。
“空桑档案馆”搭建组持续招募ing,期待更多能人异士参与食物语WIKI建设。
反馈留言  ·  编辑教程  ·  收藏方法  ·  

全站通知:

模板:Gradient Text

来自食物语-档案馆WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

模板: [刷新此页面] [编辑] [页面历史]
文档:[ 查看 ] [编辑] [页面历史]

说明文档
此页面/模板已废除。
WIKI建设过程中,失去时效性或因模板版本更迭,将替换废除的模板转移,并将页面进行了全保护
您可以从页面历史中查看以往的内容或源代码,但请勿将这些内容重新放置到本站的其他页面中。
本次操作是由馆长云晓执行的,如果您对此有任何疑问,可前往该用户的讨论页留言。

简介

这是一个真·渐变颜色文字模板。使用CSS的background-clip:text属性实现的真正意义上的渐变色文字。而不是原始的一个文字一个颜色模拟出的伪·渐变色效果。

由于目前的浏览器中,实现了background-clip:text属性的只有Edge和Webkit内核(Chrome,Safari,Android自带浏览器,国产双核浏览器的极速内核)的浏览器可以解析并显示出效果。IE、Firefox 49以下显示效果则是还原为原始的黑色字(Firefox 48可以打开about:config,把layout.css.background-clip-text.enabledlayout.css.prefixes.webkit改为true以查看效果)。

参考:background-clip | MDN

效果

我是彩虹文字 我是柔和的渐变色文字

横着渐变也可以哦

用法

{{Gradient_Text|渐变色代码|文字内容|title=鼠标悬停在文字上显示的注释}}

渐变色代码

<位置>,<颜色>,<颜色2>, ...

  • 说明:
  1. 渐变色代码由若干个以逗号分隔的颜色(名称或16进制代码)组成。
  2. 位置为可选参数,可以填角度或者方位。

简单的渐变

要确定一个渐变色,至少需要两个颜色。

最简单的渐变色代码就是将两个或者两个以上的颜色用逗号(英文半角)连接起来

代码 效果
{{Gradient_Text|red,blue|我是渐变色文字}} 我是渐变色文字
{{Gradient_Text|red,orange,yellow,green,cyan,blue,purple|更多的颜色也可以}} 更多的颜色也可以

控制位置

如果觉得上面的红色的位置太小,你可以在颜色后面加一个表示位置的百分比数字,这样在这个百分比的点上就会是这种颜色了。

代码 效果
{{Gradient_Text|red 50%,blue|我是渐变色文字}} 我是渐变色文字

控制方向

在颜色前面加上一个限定方向的词就可以控制渐变色的方向。

代码 效果
{{Gradient_Text|left,red,blue|我是渐变色文字}} 我是渐变色文字
{{Gradient_Text|top left,red,blue|这样是斜向的渐变}} 这样是斜向的渐变
{{Gradient_Text|60deg,red,blue|还可以直接输入角度值}} 还可以直接输入角度值

注释文字

|title=可设置鼠标悬停在渐变颜色文字上显示的注释文字。可选参数。

代码 效果
{{Gradient_Text|left,red,blue|鼠标放在这里可以看到注释|title=我是注释}} 鼠标放在这里可以看到注释

所有模板列表