Css滤镜的使用方法(包括参数详解)

 

‍Alpha
1. 语法: {filter: alpha(opacity=opacity, finishopacity=finishopacity, style=style, startx=startx, starty=starty, finishx=finishx, finishy=finishy)}

2. 意义: 把一个目标元素与背景混合, 设置者可以指定数值来控制混合的程度

3. 属性

3.1. opacity: 透明度水平, 0为完全透明, 100为完全不透明

3.2. finishopacity: 渐变的透明效果, 用来控制结束时的透明度.

3.3. style指定了透明区域的形状特征, 其中0代表统一形状, 1代表线型, 2代表放射状, 3代表长方形

3.4. startx和starty: 代表渐变透明效果的开始x和y坐标

3.5. finishx和finishy: 代表渐变透明效果的结束x和y坐标

---------------------------------------------------------------------------------

Blur
1. 语法:

1.1. HTML: {filter: blur(add=add, direction=direction, strength=strength)}

1.2. 脚本: [oblurfilter=]obj.filters.blur

2. 意义: 用手指在一副尚未干透的油画上划过产生的模糊效果

3. 属性

3.1. add: 布尔值, 默认true, 指定图片是否被改变成印象派的模糊效果. 模糊效果按顺时针方向进行.

3.2. direction: 设置模糊的方向, 0度代表垂直向上, 然后没45度为一个单位, 默认值是向左270度

3.3. strength: 整数, 代表有多少像素的宽度将受到模糊影响, 默认是5. 

3.4. 对于网页上的文字, 如果设置模糊add=1, 字体会有一个阴影效果.

--------------------------------------------------------------------------------------

FlipH, FlipV
1. 语法: {filter: fliph}, {filter: filipv}

2. 意义: 水平反转和垂直反转

Chroma
1. 语法: {filter: chroma(color=color)}

2. 意义: 设置一个对象中指定的颜色为透明色

3. 属性

3.1. color: 要透明的颜色

------------------------------------------------------------------------------------------

DropShadow
1. 语法: {filter: dropshadow(color=color, offx=offx, offy=offy, positive=positive);}

2. 意义: 添加对象的阴影效果.

3. 工作原理: 建立一个偏移量, 加上较深.

4. 属性:

4.1. color: 投影的颜色

4.2. offx和offy: x方向和y方向阴影的偏移量

4.3. positive: 布尔值, true代表为任何非透明像素建立可见投影, false代表为透明像素部分建立透明效果

-------------------------------------------------------------------------------------------

Glow
1. 语法: {filter: glow(color=color, strength=strength);}

2. 意义: 边缘发光效果

3. 属性

3.1. color: 发光颜色

3.2. strength: 发光强度, 1-255

-------------------------------------------------------------------------------------------------

Gray
1. 语法: {filter: gray};

2. 意义: 将图片变成灰度图

------------------------------------------------------------------------------------------------

Invert
1. 语法: {filter: invert}

2. 意义: 将对象的可视化属性全部反转, 包括色彩, 饱和度, 亮度

-------------------------------------------------------------------------------------------------

Xray
1. 语法: {filter: xray}

2. 意义: 让对象反映出它的轮廓并把这些轮廓加亮, 就是所谓的”X”光片

------------------------------------------------------------------------------------------------------

Light
1. 语法: {filter: light;}

2. IE8中的语法: {-ms-filter: “progid:DXImageTransform.Microsoft.Light()”}

3. 意义: 模拟光源投影效果, 一旦为对象定义了light过滤属性, 就可以调用它的方法来设置或改变属性.

4. 用法: 使用DOM获取到使用了filter的元素对象, 然后, document.getElementById(‘filter’).filters.item(‘DXImageTransform.Microsoft.Light’).方法名(参数列表)

5. 方法:

5.1. addAmbient: 加入无方向的环绕光到对象, 经常与其他光联合使用. 接受四个参数, 分别是red, blue, green三原色的色值和光强度. 比如addAmbient(0xFF, 0xDD, 0xEE, 200), 光强度是1-255的值.

5.2. addCone(X1, Y1, Z1, X2, Y2, red, green, blue, strength, spread): 加入锥形光源.

5.2.1. X1, Y1: 光源的左上坐标

5.2.2. Z1: 指定光的z轴级别

5.2.3. X2, Y2: 光源的目标焦点坐标

5.2.4. red, green, blue: 三原色色值

5.2.5. strength: 0-100的光强度值

5.2.6. spread: 0-90指定锥形的弧度

5.3. addPoint(X, Y, Z, red, green, blue): 加入点光源

5.3.1. X, Y: 光源圆心坐标

5.3.2. Z: Z轴级别

5.3.3. red, green, blue: 三原色色值

5.3.4. strength: 0-100的光源强度

5.4. changeColor(lightnumber, red, green, blue, absoluteBol): 改变光的颜色

5.4.1. lightnumber: 光的id, 指通过上述各种方法加入的光源的ID(按照次序)

5.4.2. red, green, blue: 三原色色值

5.4.3. absoluteBol: 布尔值, 表明三原色色值指定的值是绝对意义上的新的光色还是在原有色值基础上的增量

5.5. changeStrength(lightnumber, strength, absoluteBol): 改变光源强度

5.5.1. lightnumber: 光源id, 指通过上上方法加入的光源的ID(按照次序)

5.5.2. strength: 强度值

5.5.3. absoluteBol: 布尔值, 表明strength指定的强度是绝对的新强度还是相对原强度的增量

5.6. clear: 清楚所有光源

5.7. moveLight(lightnumber, x, y, z, absoluteBol): 移动光源, 对于锥形光源, 移动其焦点, 点光源则移动自身

5.7.1. lightnumber: 光源id

5.7.2. x, y: 移动的值

5.7.3. z: z轴级别

5.7.4. absoluteBol: 布尔值, 表明移动是完全的到新的x, y上还是, 这里的x, y是增量

------------------------------------------------------------------------------------------------------------------

Mask
1. 语法: {filter: mask(color=color)}

2. 意义: 为对象建立一个覆盖于表面的膜, 效果就像戴有色眼镜

3. 辅助其他filter

--------------------------------------------------------------------------------------------------------------------

Shadow
1. 语法: {filter: shadow(color=color, direction=direction)}

2. 意义: 在指定方向建立投影

3. 属性

3.1. color: 投影色

3.2. direction: 投影方向, 默认270度, 每45度一个单位.

---------------------------------------------------------------------------------------------------------------------

Wave
1. 语法: {filter: wave(add=add, freq=freq, lightstrength=lightstrength, phase=phase, strength=strength)}

2. 意义: 把对象按照垂直的波纹样式大乱, 默认是true

3. 属性:

3.1. add: 表示是否要把对象按照波纹样式大乱

3.2. freq: 波纹的频率, 指定在对象上一共需要产生多少个完整的波纹

3.3. lightstrength: 用于波纹增强光影效果, 范围0-100

3.4. phase: 设置正弦波的偏移量

3.5. strength: 振幅大小