css中的滤镜

时间:2021-09-12 22:53:20

前几天在做一个app应用的时候,用到了滤镜。在之前我只是知道有这么个东西,但是具体的知识点其实我是不太清楚的,所以为了让自己能深刻记忆,专门把它来记录一下。。

一、滤镜的标识符:“filter”;语法:style="filter:滤镜属性:(参数)"

二、支持度:

IE4.0以上支持的滤镜属性表

滤镜效果 描述 :

      Alpha 设置透明度 
      Blur 建立模糊效果 
      Chroma 把指定的颜色设置为透明 
      DropShadow 建立一种偏移的影象轮廓,即投射阴影 
      FlipH 水平反转 
      FlipV 垂直反转 
      Glow 为对象的外边界增加光效 
      Grayscale 降低图片的彩色度 
      Invert 将色彩、饱和度以及亮度值完全反转建立底片效果 
      Light 在一个对象上进行灯光投影 
      Mask 为一个对象建立透明膜 
      Shadow 建立一个对象的固体轮廓,即阴影效果 
      Wave 在X轴和Y轴方向利用正弦波纹打乱图片 
      Xray 只显示对象的轮廓

三、滤镜的各种属性(重点)详解:

1.alpha  滤镜用于设置透明度

法:filter:alpha(enabled=bEnabled,opacity=iOpcity,finishOpacity=iFinishOpacity,style=iStyle,startX=iPercent,startY=iPercent,finishX=iPercent,finishY=iPercent)

参数很多,但是有些参数是可选参数,不一定全部参数都要用上哦。

enabled 布尔值:true |false
(可选参数)      true:默认值,滤镜激活
                       flase:滤镜被禁止

opacity 代表透明度程度:范围是从0~100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明;

finishOpacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100;

style 指定了透明区域的形状特征。
    0代表统一形状
    1代表线形
    2代表放射状
    3代表长方形;

startX   代表渐变透明效果的开始的X坐标;

startY    代表渐变透明效果的开始的Y坐标;

finishX   代表渐变透明效果结束的X坐标;

finishY   代表渐变透明效果结束的Y坐标;

实例:style="filter:alpha(opacity=10,style=3);"

前面是IE下的,后面的透明度设置是在大众浏览器下支持的,在写代码的时候建议最好两个都写上,当一个属性没有作用时,另一个属性调用也是好的。

2.Blur 模糊效果

语法:filter:blur(add=iadd,direction=idirection,strength=istrength);

参数:

add      它指定图片是否被改变成模糊效果,模糊效果是按顺时针的方向进行的。
           这是一个布尔值:true(默认)或false,也可以是1和0,1表示“是”,0表示“否”。add=false(或“0”)时Blur滤镜不起作用,取true(或非“0”值)时Blur滤镜起作用;

direction     用来设置模糊的方向,其值为0至360度;其中0度代表垂直 向上,然后每45度为一个单位。它的默认值是向左的270度。

strength     它代表有多少个像素的宽度成为阴影,也可以简单地理解为阴影的长度。它只能用整数来指定,默认值是5个像素,可以根据实际需要来指定阴影的长度。

实例:filter: blur(1px);-webkit-filter: blur(1px);-moz-filter: blur(1px);-o-filter: blur(1px);-ms-filter: blur(1px);    数值越大,越模糊,

3、Chroma  滤镜给予图像一个特定的颜色透明

语法:"filter:Chroma(Color=color)";

实例:style= "filter:chroma(color=#ceff9c)";

4、DropShadow   添加对象的阴影效果。其工作原理是建立一个偏移量,加上较深。
语法:style= "filter:dropshadow(color=pink,offx=-5,offy=-5,positive=1)"

参数:

'Positive '    参数是一个布尔值,如果为“TRUE(非0)”,那么就为任何的非透明像素建立可见的投影。

              如果为“FASLE(0)”,那么就为透明的像素部分建立透明效果 代码如下:

offx:        阴影相对于原始对象的水平位移量,设置值为整数,单位为像素。若水平往右移,则正数;反之为负数

offy:        阴影相对于原始对象的垂直位移量,设置值为整数,单位为像素。若垂直往下移,则正数;反之为负数;

/**  注意:
     *     1. 阴影的外观受border-radius样式的影响;
     *     2. :after和:before等伪元素会继承阴影的效果。
     */

实例:style="filter:dropshadow(color=gray,offx=5,offy=5.positive=0)"

5、FlipH 水平反转 ,FlipV 垂直反转

语法:filter:fliph()              filter:filhv()

6、Glow    为对象的外边界增加光效 

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

参数:

color:设置边缘光晕的颜色,以#rrggbb的格式,或名称;
strength:设置边缘光晕的强度大小,设置值为1~255的整数;

实例:style= "filter:glow(color=yellow,strength=10)"  

7、Gray     gray滤镜并无参数 ,Invert,Xray 滤镜

语法:style="filter:gray";   /*IE5--9*/   style="filter:invert";    style="filter:xray";

Gray滤镜是把一张图片变成灰度(黑白)图;(汶川大地震后很多网站色调都变灰色,就是用的这一点代码实现的);

Invert滤镜是把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值,类似于底片效果,invert滤镜并无参数,我称它为:反色调;

Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的“X”光片,Xray 只显示对象的轮廓。

8、Grayscale 降低图片的彩色度

语法:style="filter:grayscale();";

/*灰度  取值在0-1之间   可以取值百分数或者分数*/

实例:style="filter: grayscale(1);
            -webkit-filter: grayscale(1);
            -moz-filter: grayscale(1);
            -o-filter: grayscale(1);
            -ms-filter: grayscale(1);"

个人认为:   Grayscale 和gray 有相同的效果,只不过一个有参数设置,一个没有参数设置。  

9、Light 在一个对象上进行灯光投影,它可控制多个光源照向一个对象,用以调节亮度、颜色,语法;

语法:Filter{light}

这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT'滤镜属性,那么就可以调用它的“方法(Method)'来设置或者改变属性。“LIGHT'可用的方法有:
·AddAmbient 加入包围的光源 
·AddCone 加入锥形光源 
·AddPoint 加入点光源 
·Changcolor 改变光的颜色 
·Changstrength 改变光源的强度 
·Clear 清除所有的光源 
·MoveLight 移动光源
方法详解:
(1)addAmbient (iRed,iGreen,iBlue,iStrength) : 为滤镜添加环境光。环境光是无方向的,并且均匀的洒在页面的表面。环境光有颜色和强度值,可以为对象田家更多的颜色。它通常和其他光一起使用。无返回值。
iRed : 必选项。整数值(Integer)。 指定红色值。取值范围为 0 - 255 。 
iGreen : 必选项。整数值(Integer)。 指定绿色值。取值范围为 0 - 255 。 
iBlue : 必选项。整数值(Integer)。 指定蓝色值。取值范围为 0 - 255 。 
iStrength : 必选项。整数值(Integer)。 指定光强度。取值范围为 0 - 100 。

(2)changeColor (iLightNumber,iRed,iGreen,iBlue,fAbsolute) : 改变光的颜色。无返回值。
iLightNumber : 必选项。整数值(Integer)。 指定光的标识符。 
iRed : 必选项。整数值(Integer)。指定红色值。取值范围为 0 - 255 。 
iGreen : 必选项。整数值(Integer)。指定绿色值。取值范围为 0 - 255 。 
iBlue : 必选项。整数值(Integer)。指定蓝色值。取值范围为 0 - 255 。 
fAbsolute : 必选项。布尔值(Boolean)。指定改变是替换当前设置的绝对值,还是加到当前设置的相对值。此参数不等于零表示采用绝对值。否则表示采用相对值。

可以定义光源的虚拟位置,以及通过调整X轴和Y轴的数值来控制光源焦点的位置,还可以调整光源的形式(点光源或者锥形光源)指定光源是否模糊边界、光源的颜色、亮度等属

性。如果动态的设置光源,可能回产生一些意想不到的效果。

(未测试0)
style="filter:light(); width:400; height:300" onload="javascript:this.filters.light.addAmbient(10,250,100,55)"

onmousemove="javascript:this.filters.light.changeColor(0,150,100,50,0)"     

0、Mask 为一个对象建立透明膜,掩饰,假面具,设置对象的屏蔽效果,就好象印章一样印出模型的模样;

     使用'MASK'属性可以为对象建立一个覆盖于表面的膜,其效果就象戴着有色眼镜看物体一样。

语法:STYLE="filter:Mask(Color=color)";

实例:style= "filter: mask(color=‘#0000ff’)";

11、Shadow 建立一个对象的固体轮廓,即阴影效果 ;阴影渐变 除了具备DropShadow的阴影效果外,它还多了阴影渐变的特效;

语法:filter:Shadow(Color=color,Direction=direction)

参数:Color:#rrggbb格式。
Direction:用于设定动态模糊效果的方向,总单位为360°,0代表垂直向上,并以每45°为一个单位,默认为225度;
例子:filter:Shadow(Color="#6699CC",Direction="135");  

12、Wave 在X轴和Y轴方向利用正弦波纹打乱图片 
  语法:filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)

说明:
Add:一般为1,或0。
Freq:变形值。
LightStrength:变形百分比。
Phase:角度变形百分比。
Strength:变形强度。
例子:filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2");

13、saturate   饱和度

语法:style="filter:saturate();"

实例:

  /** 
     *  效果范围,取值范围>=0的数字或百分数,1为无效果,0为灰度图
     */
     -webkit-filter: saturate(2);
     -moz-filter: saturate(2);
     -o-filter: saturate(2);
     -ms-filter: saturate(2);
     filter: saturate(2); 

14、Hue Rotate     色相旋转滤镜 /*反色调  取值为0-360deg*/ 

语法: style="filter: hue-rotate();" ;

实例:

/**  格式,filer: hue-rotate(效果范围)
     *  效果范围,取值范0deg~365deg,0(默认值)为无效果
     */
     -webkit-filter: hue-rotate(200deg);
     -moz-filter: hue-rotate(200deg);
     -o-filter: hue-rotate(200deg);
     -ms-filter: hue-rotate(200deg);
     filter: hue-rotate(200deg);

15:sepia      滤镜是对图片或元素整体进行棕褐色处理,就是老照片那种效果。

语法: style="filter: hue-rotate();" ;

实例:

    /*老照片效果  取值0-1之间*/

    filter: sepia(0.5);
           -webkit-filter: sepia(0.5);
           -moz-filter: sepia(0.5);
           -o-filter: sepia(0.5);
           -ms-filter: sepia(0.5);

16、brightness   亮度

语法: style="filter: brightness();" ;

实例:

/**  格式,filer: brightness(效果范围)
     *  效果范围,取值范围>=0的数字或百分数,1为无效果
     */
     -webkit-filter: brightness(2);
     -moz-filter: brightness(2);
     -o-filter: brightness(2);
     -ms-filter: brightness(2);
     filter: brightness(2);

17、contrast   对比度

/**  格式,filer: contrast(效果范围)
     *  效果范围,取值范围>=0的数字或百分数,1为无效果
     */
     -webkit-filter: contrast(2);
     -moz-filter: contrast(2);
     -o-filter: contrast(2);
     -ms-filter: contrast(2);
     filter: contrast(2);

前面的 内容有些我没有经过测试,不过后面的饱和度,对比度亮度什么的,我都有进行测试哦。。。