filter属性允许您向文本和图像添加更多的样式效果,可替代部分ps的效果。
注释:1.若需要使用 filter 属性,请始终指定元素的宽度。
2.除非 background-color 属性被设置为 transparent,否则某些 Filter 属性将无法工作!
属性 | 参数 | 描述 | 例子 |
---|---|---|---|
alpha |
| 允许您设置元素的透明度 | filter:alpha( opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270) |
blur |
| 使元素模糊 | filter:blur( add=true, direction=90, strength=6); |
chroma | color | 使指定的颜色透明 | filter:chroma( color=#ff0000) |
fliph | none | 水平反转元素 | filter:fliph; |
flipv | none | 垂直反转元素 | filter:flipv; |
glow |
| 使元素发光 | filter:glow( color=#ff0000, strength=5); |
gray | none | 用黑白色来呈现元素 | filter:gray; |
invert | none | 用反转的颜色和亮度值来呈现元素 | filter:invert; |
mask | color | 呈现带有指定背景色和透明前景色的元素 | filter:mask( color=#ff0000); |
shadow |
| 呈现带有阴影的元素 | filter:shadow (color=#ff0000, direction=90); |
dropshadow |
| 呈现带有阴影的元素 | filter:dropshadow (color=#ff0000, offx=5, offy=5, positive=true); |
wave |
| 把元素呈现为波浪状 | filter:wave( add=true, freq=1, lightstrength=3, phase=0, strength=5) |
xray | none | 使用黑白色显示带有反转色和亮度值的元素 | filter:xray; |
dom获取filter属性:obj.filters.属性名,例如:obj.filters.blur;