css滤镜

滤镜

  语法:STYLE="filter:filtername(fparameter1, fparameter2...)"
    (Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)

  滤镜说明:
    Alpha:设置透明层次,让HTML元件呈现出透明的渐进效果
    blur:创建高速度移动效果,即模糊效果,让HTML元件产生风吹模糊的效果
    Chroma:制作专用颜色透明,让图像中的某一颜色变成透明色
    DropShadow:创建对象的固定影子,让HTML元件有一个下落式的阴影
    FlipH:创建水平镜像图片,让HTML元件水平翻转
    FlipV:创建垂直镜像图片,让HTML元件垂直翻转
    glow:加光辉在附近对象的边外,在元件的周围产生光晕而模糊的效果
    gray:把图片灰度化,把一个彩色的图片变成黑白色
    invert:反色,产生图片的照片底片的效果
    light:创建光源在对象上,在HTML元件上放置一个光影
    mask:创建透明掩膜在对象上,利用另一个HTML元件在另一个元件上产生图像的遮罩
    shadow:创建偏移固定影子,产生一个比较立体的阴影
    wave:波纹效果,让HTML元件产生水平或是垂直方向上的波浪变形
    Xray:使对象变得像被x光照射一样,产生HTML元件的轮廓,就像是照X光一样

 

css滤镜

 

 

 

 

 

 

 

 

 

 

  1、滤镜:Alpha
    语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)" 
    说明:
      Opacity:起始值,取值为0~100, 0为透明,100为原图。
      FinishOpacity:目标值。
      Style:1或2或3
      StartX:任意值
      StartY:任意值
    例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2") 

  2、滤镜:blur
    语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
    说明:
      Add:一般为1,或0。
      Direction:角度,0~315度,步长为45度。
      Strength:效果增长的数值,一般5即可。
    例子:filter:Blur(Add="1",Direction="45",Strength="5")

  3、滤镜:Chroma
    语法:STYLE="filter:Chroma(Color = color)"
    说明:color:#rrggbb格式,任意。
    例子:filter:Chroma(Color="#FFFFFF")

  4、滤镜:DropShadow
    语法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
    说明:Color:#rrggbb格式,任意。
      Offx:X轴偏离值。
      Offy:Y轴偏离值。
      Positive:1或0。
    例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

  5、滤镜:FlipH
    语法:STYLE="filter:FlipH" 
    例子:filter:FlipH 

  6、滤镜:FlipV
    语法:STYLE="filter:FlipV"
    例子:filter:FlipV 

  7、滤镜:glow
    语法:STYLE="filter:Glow(Color=color, Strength=strength)"
    说明:
      Color:发光颜色。
      Strength:强度(0-100)
    例子:filter:Glow(Color="#6699CC",Strength="5")

  8、滤镜:gray
    语法:STYLE="filter:Gray"
    例子:filter:Gray

  9、滤镜:invert
    语法:STYLE="filter:Invert"
    例子:filter:Invert

  10、滤镜:mask
    语法:STYLE="filter:Mask(Color=color)"
    例子:filter:Mask (Color="#FFFFE0")

  11、滤镜:shadow
    语法:filter:Shadow(Color=color, Direction=direction)
    说明:
      Color:#rrggbb格式。
      Direction:角度,0-315度,步长为45度。
    例子:filter:Shadow (Color="#6699CC", Direction="135")

  12、滤镜:wave
    语法: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、滤镜:Xray
    语法:STYLE="filter:Xray" 
    例子:filter:Xray

 

滤镜中我们比较常用的应该就是设置透明度了,这里简单说说几种设置透明度的方法:

  filter: alpha(opacity=90);    兼容IE浏览器,取值0-100.
  -moz-opacity: 0.9;            兼容火狐浏览器,取值0-1.
  opacity: 0.9;                     用来设置一个元素的透明度,取值范围是0~1之间,不可为负值。opacity取值为1是完全不透明,取值为0是完全透明.

  从Firefox3.5+不再支持私有属性-moz-opacity了,在Mozilla 1.7 (Firefox 0.9)之前FF都是使用这个私有属性的,Firefox 0.9-Firefox3同时支持-moz-opacity和opacity这两个属性.

  IE9+才开始支持CSS3 opacity,而对IE6-IE8我们习惯使用filter滤镜属性来进行实现。IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).

  IE8又引入了特殊的-ms-filter,IE认为这种写法是对旧写法的一次更正,更符合规范,这个写法的属性值只是多了一对引号,效果同前。不过,这种写法的寿命也不长,到IE10对filter与      -ms-filter都已经不再支持。

  Safari 1.2之前的版本,是基于khtml的浏览器内核,1.2版发布后,不再支持-khtml-opacity的写法,-khtml-opacity也随之成为历史。

  Konqueror从未支持过-khtml-opacity,从4.0版本开始已经支持opacity。

  除IE外,目前主流浏览器 Opera 9.0+,Safari  1.2(WebKit 125) +,chrome等等都支持opacity这个透明度属性。

   

Alpha 滤镜参数详解
参数名 说明  取值说明 
Opacity 不透明的程度,百分比。 从0到100,0表是完全透明,100表示完全不透明。
FinishOpacity 这是一个同Opacity一起使用的选择性的参数,当同时Opacity和FinishOpacity时,可以制作出透明渐进的效果。 从0到100,0表是完全透明,100表示完全不透明。
Style 当同时设定了Opacity和finishOpacity产生透明渐进时,它主要是用赤指定渐进的显示形状。 0:没有渐进;1:直线渐进;2:圆形渐进;3:矩形辐射。
StartX 渐进开始的 X 坐标值  
StartY 渐进开始的 Y 坐标值  
FinishX 渐进结束的 X 坐标值  
FinishY 渐进结束的 Y 坐标值  

 

 

 

 

 

 

 

 

 

 

 

 

 

感谢您怀着耐心看完整篇博文!!!
如果文章有什么错误或不当之处,请您斧正!
您有任何意见或者建议,您可以给我发邮件,也可以在下面留言,我看到了会第一时间回复您的,谢谢!

css滤镜,布布扣,bubuko.com

css滤镜

上一篇:jquery全选,jquery全不选,jquery反选


下一篇:为半个字符应用CSS样式可能吗?