Template:HighBrightnessMod/doc

本模板用于调节页面内特定元素的颜色亮度。

简介

本模板生成一个亮度调节滑块，可对所有生效元素添加filter样式，以降低其亮度（brightness）。

对生效元素的指定可以通过CSS选择器（推荐），也可以直接指定一种颜色。

本模板生成的亮度调节滑块对页面中符合生效条件的所有元素均起效。同一个页面中可以多次使用本模板；多个本模板的生效条件一致时，这些滑块会同步变化。

参数

本模板支持以下实名参数：

指定生效元素

可以通过selector或color参数指定本模板的生效元素，二者只能选其一且必选其一：

• selector：使用CSS选择器指生效元素，参见上方参考资料及下方用例。
• color：直接指定一种颜色，使本模板对所有使用此颜色的元素均生效。注意：
  • 所有名称以“color”结尾的样式属性均在生效范围内，包括color（文本颜色）、background-color（背景颜色）等；
  • 请在这一参数和所有受影响元素的样式统一使用颜色名称（如yellow、aqua）或统一使用rgb(xx, xx, xx)格式，而不要用十六进制值#XXXXXX等其他格式，以确保本模板对所有相应元素均正常生效。
  • 由于以上因素，推荐使用selector参数而非color参数，以便更准确地控制生效范围。

其他参数

• minimumBrightness：可选，指定可调节的最低亮度（%），参数取值范围为0~99，默认为60。

用例

color

颜色名称
{{HighBrightnessMod|color=yellow}} *默认颜色的文字 *{{color|yellow|黄色的文字}} *{{color|red|红色的文字}} *{{color|yellow|另一行黄色的文字}} *<span style="background-color: yellow;">背景是黄色的文字</span> 默认颜色的文字 黄色的文字 红色的文字 另一行黄色的文字 背景是黄色的文字

rgb函数
{{HighBrightnessMod|color=rgb(199, 233, 166)}} *{{color|red|红色的文字}} *{{color|rgb(199, 233, 166)|生草的文字}} *{{color|#C7E9A6|这一行也生草，但用了十六进制代码，可能不会生效}} *{{color|yellow|本模板作用范围是整个页面，故前面的第一个调节器对这一行黄色文字也生效}} 红色的文字 生草的文字 这一行也生草，但用了十六进制代码，可能不会生效 本模板作用范围是整个页面，故前面的第一个调节器对这一行黄色文字也生效

selector

类选择器

{{HighBrightnessMod|selector=.hbm-test}} *{{color|#A0FFF9|呜～}}（未包裹在类中，不生效） *<span class="hbm-test">{{color|#A0FFF9|太好听了吧！}}</span>（包裹在类中） *<span class="hbm-test" style="color: #A0FFF9;">你唱歌真的好好听啊，</span>（同上） *<span class="hbm-test" style="color: rgb(160, 255, 249);">简直就是天籁！</span>（用任何格式描述颜色都可以） *<span class="hbm-test" style="color:#FEE155;">你怎么可能会有女朋友嘛～</span>（不是同一种颜色也可以） 呜～（未包裹在类中，不生效） 太好听了吧！（包裹在类中） 你唱歌真的好好听啊，（同上） 简直就是天籁！（用任何格式描述颜色都可以） 你怎么可能会有女朋友嘛～（不是同一种颜色也可以）

ID选择器
{{HighBrightnessMod|selector=#hbm-test-1}} *<span id="hbm-test-1" style="color:#A0FFF9;">心跳在跃动</span>（仅对此一个元素生效） *<span style="color:#A0FFF9;">幸福满天空</span> 心跳在跃动（仅对此一个元素生效） 幸福满天空

当然还有其他的CSS选择器以及更复杂的组合，请自行学习有关知识并运用，这里不再举例。

minimumBrightness

minimumBrightness
{{HighBrightnessMod|selector=#hbm-test-2|minimumBrightness=0}} *<span id="hbm-test-2" style="color:pink;">黑，真TM的黑啊</span> 黑，真TM的黑啊

其他用例

同时使用多个
{{HighBrightnessMod|selector=.hbm-test-a}} {{HighBrightnessMod|selector=.hbm-test-b}} *<span class="hbm-test-a" style="color: #FEE155;">我是A类</span> *<span class="hbm-test-b" style="color: #A0FFF9;">我是B类</span> *<span class="hbm-test-b" style="color: #FEE155;">我也是B类</span> *<span class="hbm-test-a" style="color: #A0FFF9;">我才是A类</span> 我是A类 我是B类 我也是B类 我才是A类

多个的生效条件相同
{{HighBrightnessMod|selector=.hbm-test-a}} *<span class="hbm-test-a" style="color: #FEE155;">量 子 纠 缠（请注意上一个框中的滑块）</span> 量 子 纠 缠（请注意上一个框中的滑块）

划定生效区域
{{HighBrightnessMod|selector=.hbm-test-field .hbm-test-c}} <div class="hbm-test-field"> *<span class="hbm-test-c" style="color: #A0FFF9;">其疾如风</span> </div> *<span class="hbm-test-c" style="color: #A0FFF9;">不动如山</span> 其疾如风 不动如山

在{{LyricsKai/colors}}中使用
{{HighBrightnessMod|selector=.Lyrics span[title*='唐可可']}} {{LyricsKai/colors |override=1 |charaBlock=on |colors=#A0FFF9; #FF6E90; lg(#A0FFF9,#FF6E90) |charas=唐可可；岚千砂都；唐可可、岚千砂都 |original= @1いつのまにか　大好きが育ってた @2この想い届けてみよう @3決めたんだ　本気さ！ |translated= 不经意间 这份喜爱已经成长起来 来试着传达这份心情吧 带着这份认真 就这样决定了！ }}  唐可可  岚千砂都  いつのまにか　大好きが育ってた 不经意间 这份喜爱已经成长起来 この想い届けてみよう 来试着传达这份心情吧 決めたんだ　本気さ！ 带着这份认真 就这样决定了！

附注

本模板使用了Widget:HighBrightnessMod。

建议有需要使用此亮度调节装置的专题考虑自行定制包装本模板及{{Color}}、{{Coloredlink}}等模板，以便更方便地在专题相关条目中管理有关颜色。

参阅

• {{ColorOps}}