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