2023年政策修订增补工作正在进行中,欢迎参与!
  • Moegirl.ICU:萌娘百科流亡社群 581077156(QQ),欢迎对萌娘百科运营感到失望的编辑者加入
  • Moegirl.ICU:账号认领正在试运行,有意者请参照账号认领流程

用戶:Leranjun/archive/Template:CSSFilter

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋
文檔  [查看] [編輯] [歷史] [刷新]

Template:CSSFilter 該模板使用Widget:CSSFilter重新開放被MW屏蔽掉的CSS filter屬性。該屬性可用的函數及其效果可以參考MDN官網

用法

使用前應先調用此模板加載Widget。

{{CSSFilter}}

在想要添加filter的元素上添加cssfilter這個class,然後對應想要使用的filter函數增加data-cssfilter-函数名="函数内容"即可。

(i)注意 如果其中任意一個函數名不合法(例如data-cssfilter-annangela="1"),則該函數會被忽略。 如果其中任意一個函數值不合法(例如data-cssfilter-blur="AnnAngela"),則所有filter都會被忽略;此時Widget會在控制台報錯,您可以打開開發者工具查看。

示例

<div class="cssfilter" data-cssfilter-blur="5px" data-cssfilter-opacity="0.8" style="background: #1976d2; width: 100px; height: 100px;"></div>

將會生成:

此時生成的CSS相當於:

filter: blur(5px) opacity(0.8);