模板: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}}