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);