网页编程 - CSS滤镜详解

一、透明滤镜

        功能:以指定透明度及透明方式显示图片或文字

        语句:STYLE="Filter:alpha(style=N,opacity=N,finishOpacity=N,startX=N,finishX=N,startY=N,finishY=N)"

       (N代表数字,下同)

        属性诠释:style - 透明方式(0 统一,1 线性渐变,2 放射性渐变,3 矩形渐变);opacity - 透明度(取值0到100);finishOpacity - 渐变透明时设置终止位置透明度;startX - 渐变透明的起始位置横坐标(以图片左上角为原点);finishX - 渐变透明的终止位置横坐标;startY、finishY类似

        

    

    二、模糊滤镜

        功能:以指定方向运动模糊图片或文字

        语句:STYLE="Filter:blur(direction=N,strength=N,add=N)"

        属性诠释:direction - 运动模糊方向(向上为0度,顺时针方向递增);strength - 模糊强度;add - 是否保留原图可见性(0 完全模糊,1 原图可见)

        

    

    三、滤色滤镜

        功能:过滤指定颜色使之成透明

        语句:STYLE="Filter:chroma(color=C)"

              (C代表颜色,下同);

        属性诠释:color - 用颜色代码或单词表示的待过滤颜色;

        

    

    四、投影滤镜

        功能:在图片或文字后以实体偏移方式填充阴影

        语句:STYLE="Filter:dropShadow(color=C,offX=N,offY=N,positive=N)"

        属性诠释:color - 投影颜色;offX - 水平偏移量(为负值则向左偏);offY - 垂直偏移量(为负值则向上偏);positive - 投影方式(0 为透明区投影,1 为非透明区投影)

        

    

    五、反转滤镜

        功能:将图片或文字水平或垂直反转

        语句:STYLE="Filter:flipH"(水平反转) 

              或 STYLE="Filter:flipV"(垂直反转)

        

    

    六、发光滤镜

        功能:在图片或文字边缘产生光晕效果

        语句:STYLE="Filter:glow(color=C,strength=N)"

        属性诠释:color - 指定光晕色泽;strength - 发光强度

        

    

    七、灰度滤镜

        功能:以黑白模式显示图片

        语句:STYLE="Filter:gray"

        

    

    八、光源滤镜

        功能:为图片或文字添加光照效果(需配合Javascript使用)

        语句:STYLE="Filter:light"

        

    

    九、反色滤镜

        功能:将图片显示为底片色彩

        语句:STYLE="Filter:invert"

        

    

    十、蒙板滤镜

        功能:将图片的不透明区显示为透明,透明区显示为蒙板颜色

        语句:STYLE="Filter:mask(color=C)"

        

    

    十一、阴影滤镜

        功能:以线性渐隐形式显示阴影(区别于投影滤镜)

        语句:STYLE="Filter:shadow(color=C,direction=N)"

        

    

    十二、波纹滤镜

        功能:波动扰乱图像

        语句:STYLE="Filter:wave(freq=N,strength=N,lightStrength=N,phase=N,add=N)"

        属性诠释:freq - 波纹数目;strength - 波动强度;lightStrength - 波峰与波谷的亮度对比;phase - 波纹偏移量;add - 是否保持原图可见性(0 完全波动,1 原图可见)

        

    

    十三、X射线滤镜

        语句:STYLE="Filter:XRay"