Filter属性
设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的height 或width 属性,或者设定position 属
性为absolute,或者设定display 属性为block。请参阅对象的hasLayout 属性。若要在img 对象上应用shadow 滤镜,可以在该对象img 对象的父容器上应用。
Alpha滤镜
属性名称 | 设定值 | 说明 |
opacity | 0-100 (100为默认值) | 对象的亮度 |
style | 1, 2, 3 | 滤镜的样式 |
例子1:img{filter:alpha(style=1,opacity=70);}
例子2:div{background:pink;height:200px;alpha(style=3,opacity=70)}
Blur滤镜
属性名称 | 设定值 | 说明 |
add | true/false | 是否设为映像派 |
direction | 0-360 | 角度 |
strength | 数字 | 模糊度 |
Fliph、Flipv 滤镜
没有属性
将图片镜像翻转:filter:fliph();
将图片垂直翻转:filter:flipv();
Dropshadow滤镜
属性名称 | 设定值 | 说明 |
color | 十六进制/英文 | 投影颜色 |
offx | 数字 | 投影横向偏离对象多少像素 |
offy | 数字 | 投影纵向偏离对象多少像素 |
positive | true/false | 是否建立透明 |
例子:div{height:200px;filter:dropshadow(color=red,offx=2,offy=2)}
Glow滤镜
属性名称 | 设定值 | 说明 |
color | 十六进制/英文 | 发光颜色 |
strength | 数字 | 发光强度 |
Gray,Invert,Xray滤镜
没有属性。
Gray灰度效果滤镜;
Invert照片反光效果滤镜;
Xray X射线效果滤镜;
Shadow滤镜
属性名称 | 设定值 | 说明 |
color | 十六进制/英文 | 阴影颜色 |
direction | 0-360 | 阴影方向 |