本模板用於調節頁面內特定元素的顏色亮度。
本模板生成一個亮度調節滑塊,可對所有生效元素添加filter樣式,以降低其亮度(brightness)。
對生效元素的指定可以通過CSS選擇器(推薦),也可以直接指定一種顏色。
本模板生成的亮度調節滑塊對頁面中符合生效條件的所有元素均起效。同一個頁面中可以多次使用本模板;多個本模板的生效條件一致時,這些滑塊會同步變化。
本模板支持以下實名參數:
可以通過selector或color參數指定本模板的生效元素,二者只能選其一且必選其一:
selector:使用CSS選擇器指生效元素,參見上方參考資料及下方用例。color:直接指定一種顏色,使本模板對所有使用此顏色的元素均生效。注意:
color(文本顏色)、background-color(背景顏色)等;yellow、aqua)或統一使用rgb(xx, xx, xx)格式,而不要用十六進制值#XXXXXX等其他格式,以確保本模板對所有相應元素均正常生效。selector參數而非color參數,以便更準確地控制生效範圍。minimumBrightness:可選,指定可調節的最低亮度(%),參數取值範圍為0~99,默認為60。| 顏色名稱 |
|---|
{{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|本模板作用範圍是整個頁面,故前面的第一個調節器對這一行黃色文字也生效}}
|
| 類選擇器 |
|---|
{{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 |
|---|
{{HighBrightnessMod|selector=#hbm-test-2|minimumBrightness=0}}
*<span id="hbm-test-2" style="color:pink;">黑,真TM的黑啊</span>
|
| 同時使用多個 |
|---|
{{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>
|
| 多個的生效條件相同 |
|---|
{{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}}等模板,以便更方便地在專題相關條目中管理有關顏色。