第十四章 CSS滤镜.ppt

第十四章 CSS滤镜 本章内容 14.1 滤镜概述 14.2 滤镜效果 14.1 滤镜概述 CSS滤镜主要是用来实现图像的各种特殊效果。 CSS中滤镜属性的标识符是filter，它可以设置文字、图片和表格的滤镜效果。 基本语法： filter : filtername( fparameter1 , fparameter2 , ...) 语法解释：filter是滤镜属性选择符，filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数 。 滤镜分类 14.1 滤镜效果- 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代表长方形。 Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。 Blur（模糊） blur属性实现模糊的效果 。 基本语法： filter：blur（add=add, direction, strength=strength） Add参数有两个参数值：true和false，意思是指定图片是否被改变成模糊效果。 Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。 Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。 Chroma(透明色) Chroma属性可以设置一个对象中指定的颜色为透明色 。 基本语法： filter：chroma（color=value） value为想要指定透明的颜色值 ，#rrggbb格式，任意值。 注意：chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理（比如JPG、GIF等格式），所以它们很少有固定的位置可以设置为透明。 DropShadow(投射阴影) DropShadow属性为对象添加阴影效果。 基本语法： filter : dropshadow（color=color, offx=offx, offy=offy, positive=positive） Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。 Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。 FlipH、FlipV（翻转效果） Flip是CSS滤镜的翻转属性。 基本语法： filter：fliph 　　 filter：flipv FlipH代表水平翻转，FlipV代表垂直翻转。 Glow（外边界光效） 当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果。 基本语法： filter：glow（color=color, strength=strength） Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。 Gray（去色效果） Gray属性把一张图片变成灰度图。 基本语法： filter：gray Invert（底片效果） Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。 基本语法： filter：invert Mask（透明膜效果） Mask属性为对象建立一个覆盖于表面的膜。 基本语法： filter：mask（color=颜色） 只有一个Color参数，用来指定使用什么颜色作为掩膜。 Shadow（阴影效果） Shadow属性可以在指定的方向建立物体的投影。 基本语法： filt