User:Leranjun/archive/Template:CSSFilter

文档  

这个文档嵌入自User:Leranjun/archive/Template:CSSFilter/doc。

Template:CSSFilter 该模板使用Widget:CSSFilter重新开放被MW屏蔽掉的CSS filter属性。该属性可用的函数及其效果可以参考MDN官网。

用法

使用前应先调用此模板加载Widget。

{{CSSFilter}}

在想要添加filter的元素上添加cssfilter这个class，然后对应想要使用的filter函数增加data-cssfilter-函数名="函数内容"即可。

(ｉ)注意 如果其中任意一个函数名不合法（例如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);