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