css3滤镜
语法:filter: value1 value2 ...;
值:
none 默认值、initial 设置为默认值、inherit 继承
opacity(0-1) 透明度,可以写为:opacity: 0-1; √
grayscale(0-1) 灰度
contrast(0-n) 对比度
saturate(0-n) 饱和度
brightness(0-n) 亮度
blur(npx) 模糊 √
invert(0-1) 反色
sepia(0-1) 褐色
hue-rotate(0-360deg) 色相旋转
drop-shadow(x y blur color) 阴影
url(svg-url#element-id) svg滤镜 √
grayscale(1) invert(1) X光
ie滤镜
透明
filter: progid:DXImageTransform.Microsoft.Alpha();
属性:
style 设置透明风格,0 默认 1 线性 2 径向 3 矩形
opacity 设置不透明度值,0-100
finishOpacity 设置最后不透明度值,0-100
startX 设置水平方向开始值,num
finishX 设置水平方向结束值,num
startY 设置垂直方向开始值,num
finishY 设置垂直方向结束值,num
模糊
filter: progid:DXImageTransform.Microsoft.Blur();
filter: progid:DXImageTransform.Microsoft.MutionBlur();
属性1:
pixelRadius 设置模糊程度,num
makeShadow 设置是否处理为阴影,boolean
shadowOpacity 设置阴影的透明度,0-100
属性2:
add 设置图像模糊是否覆盖在原图上,true false
direction 设置对象模糊方向,0-315
strength 设置对象模糊范围,默认值5
专用颜色透明
filter: progid:DXImageTransform.Microsoft.Chroma();
属性:
color 设置颜色
光源
filter: progid:DXImageTransform.Microsoft.Light();
属性:
addAmbient 加入对象环境光
addCone 加入锥形光源
addPoint 加入点光源
changeColor 改变亮度颜色
changeStrength 改变亮度长度
clear 清除亮度
moveLight 移动光源焦点
发光
filter: progid:DXImageTransform.Microsoft.Glow();
透明掩膜
filter: mask();
属性:
color 设置颜色
阴影
filter: progid:DXImageTransform.Microsoft.Shadow();
filter: progid:DXImageTransform.Microsoft.DropShadow();
属性1:
color 设置颜色
strength 设置范围
direction 设置角度
属性2:
color 设置颜色
offX 设置水平位置
offY 设置垂直位置
positive 设置正反面,0-1
波纹
filter: progid:DXImageTransform.Microsoft.Wave();
属性:
add 0-1
freq 变形值
strength 变形强度
lightStrength 变形百分比
phase 角度变形百分比
灰度
filter: gray;
反色
filter: invert;
X光
filter: xray;
翻转
filter: flipH;
filter: flipV;
马赛克
filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
rgba
progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorstr=‘#886287a7‘, endColorstr=‘#886287a7‘);
png透明、多背景、放大
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader();
属性:
enabled 设置滤镜是否激活,boolean
sizingMethod 设置显示方式, image crop scale
src 设置链接
渐变
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#000000, endColorstr=#FFFFFF);
旋转
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
矩阵
filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod= ‘auto expand‘, M11= fM11, M12= fM12, M21= fM21, M22= fM22 );