在CSS(层叠样式表中)有类似Photoshop中处理图像的滤镜,现简单介绍下,供初学者参考.

一 alpha滤镜的参数

opacity 开始时的透明度 0-100

finishopacity 结束时的透明度 0-100

style 渐变样式.0代表均匀渐变 1代表直线式渐变 2代表圆形式渐变

3代表矩形式渐变

startx starty finishx finishy 渐变开始/结束位置

例1

style="filter:alpha(style=0,opacity=50)">效果如下.

例2

src="http://www.fj.xinhuanet.com/news/2006-02/21/xinsrc_3302032016350311520944.jpg">效果如下.

例3

src="http://www.fj.xinhuanet.com/news/2006-02/21/xinsrc_3302032016350311520944.jpg">

二 blur滤镜的参数

作用:让图片产生一种动态模糊效果

add 是否显示原始图片,0不显示 1显示(默认)

direction

控制动态模糊的方向,从0度开始,45度为一个单位,直到360度.默认270.

strength 设置动态模糊的强度,默认5px

例4

src="http://www.fj.xinhuanet.com/news/2006-02/21/xinsrc_3302032016350311520944.jpg">

例5

src="http://www.fj.xinhuanet.com/news/2006-02/21/xinsrc_3302032016350311520944.jpg">

三 filph滤镜和filpv滤镜

作用:图片的水平翻转和垂直翻转.

例6

src="http://www.fj.xinhuanet.com/news/2006-02/21/xinsrc_3302032016350311520944.jpg">

例7

src="http://www.fj.xinhuanet.com/news/2006-02/21/xinsrc_3302032016350311520944.jpg">

例8

src="http://www.fj.xinhuanet.com/news/2006-02/21/xinsrc_3302032016350311520944.jpg">

四 gray滤镜

作用:让彩色图片变成黑白图片,无参数.

例9

src="http://www.fj.xinhuanet.com/news/2006-02/21/xinsrc_3302032016350311520944.jpg"

style="filter:gray">

五 invert滤镜

作用:实现底片效果,将图片的颜色饱和度以及亮度完全反转过来无参数

例10

src="http://www.fj.xinhuanet.com/news/2006-02/21/xinsrc_3302032016350311520944.jpg">

六 Xray滤镜

作用:实现X光效果,无参数

例11

src="http://www.fj.xinhuanet.com/news/2006-02/21/xinsrc_3302032016350311520944.jpg">

七 波浪滤镜

作用:使图片产生波浪效果

add 是否显示原来的图片,0不显示(默认),1显示

freq 设置图片上的波浪数目

strength 设置波浪强度的大小

lightstrength 设置波浪的光照强度 0-100

phase 设置波浪的起始位置 0-100

例12

src="http://www.fj.xinhuanet.com/news/2006-02/21/xinsrc_3302032016350311520944.jpg">

就只介绍这些吧.还有chroma,dropshadow,glow,mask,shadow滤镜.这些仅能用于GIF格式的图片.以后再介绍