• CSS 滤镜详解


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

    滤镜说明:

      alpha:设置透明层次
      blur:创建高速度移动效果,即模糊效果
      chroma:制作专用颜色透明
      DropShadow:创建对象的固定影子
      FlipH:创建水平镜像图片
      FlipV:创建垂直镜像图片
      glow:加光辉在附近对象的边外
      gray:把图片灰度化
      invert:反色
      light:创建光源在对象上
      mask:创建透明掩膜在对象上
      shadow:创建偏移固定影子
      wave:波纹效果
      Xray:使对象变得像被x光照射一样


     css滤镜的标识符是“filter”,总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。 css滤镜分类

      

    CSS滤镜

    可以直接作用于对象上,并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等脚本语言,能产生更多变幻效果的则称为高级滤镜。

    alpha(通道)

       alpha滤镜用于设定透明度,它的表达式如下:   filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY)   其中opacity表示透明度等级,可选值从0~100,0代表完全透明,100代表完全不透明。Style参数指定了透明区域的形状特征。其中0代 表统一形状;1代表线形;2代表放射状;3代表长方形。StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变 透明效果的结束坐标。   ie下实现方式filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 标准浏览器(FF、Chrome、Opera)下实现方式:opacity: 0.5;

    blur(模糊)

       模糊滤镜给予对象朦胧神秘的效果,它的表达式如下:   filter:progid:DXImagetransform.microsoft.blur(makeshadow=makeshadow,pixelradius=pixelradius,   shadowopacity=shadowopacity);  其中makeshadow代表是否处理为阴影,pixelradius表示模糊作用 深度,shadowopacity表示阴影的透明度。

    Chroma(透明色)

      chroma滤镜给予图像一个特定的颜色透明,它的表达式如下:"filter:Chroma(Color=color)"  说明:color:#rrggbb格式,任意。  例子:filter:Chroma(Color="#FFFFFF")

    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")

    FlipH(水平翻转)

      语法:STYLE="filter:FlipH"  例子:filter:FlipH

    FlipV(垂直翻转)

      语法:STYLE="filter:FlipV;"  例子:filter:FlipV;

    glow(外边界光效)

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

    invert(底片效果)

      语法:STYLE="filter:Invert"  例子:filter:Invert

    mask(透明膜效果)

      语法:STYLE="filter:Mask(Color=color)"  例子:filter:Mask(Color="#FFFFE0")

    shadow(阴影效果)

      

    shadow阴影效果的direction属性方位图

       语法:filter:Shadow(Color=color,Direction=direction)  说明:  Color:#rrggbb格 式。  Direction:用于设定动态模糊效果的方向,总单位为360°,0代表垂直向上,并以每45°为一个单位,而度数以方向定位时,将如右图所 示:  例子:filter:Shadow(Color="#6699CC",Direction="135")

    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")

    Xray(只显示轮廓)

      语法:STYLE="filter:Xray"  例子:filter:Xray

     

    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

  • 相关阅读:
    【BZOJ1093】【ZJOI2007】最大半联通子图 [DP][Tarjan]
    【BZOJ1926】【SDOI2010】粟粟的书架 [主席树]
    【BZOJ4069】【APIO2015】巴厘岛的雕塑 [贪心][DP]
    【BZOJ2815】【ZJOI2012】灾难 [LCA]
    【BZOJ3453】XLkxc [拉格朗日插值法]
    【BZOJ2850】巧克力王国 [KD-tree]
    《类和对象》
    @RequestMapping映射请求
    010-Python-socket编程
    SSH-Struts第二弹:一个Form提交两个Action
  • 原文地址:https://www.cnblogs.com/Lin267307031/p/2676736.html
Copyright © 2020-2023  润新知