» 网友学堂 » HTML/CSS教程 » CSS图片滤镜大全
CSS图片滤镜大全
作者：ljjk5 发表时间：2007-7-19 12:22 阅读：980次 在百度搜索相关内容
你知道吗？现在CSS的功能已经变得非常强大，说这句话你可能会怀疑，但是你看完下面这些CSS对图片效果的处理之后你就会开始对CSS另眼相看的，好了，现在就跟我来吧......

一、波浪效果(Wave)
效果演示：
====>
代码如下：
<STYLE TYPE="TEXT/CSS">
.Wave { filter:Wave(Add=0, Freq=2, LightStrength=15, Phase=-20, Strength=5)}
</STYLE>
上面代码中".Wave"是自定义的一个CSS样式，也可以是其它的字母。一般是放在<head></head>之间的。
图片里的代码如下:<IMG SRC="pic/little.jpg" CLASS="Wave">，这样就调用了CSS中内容了。
Wave参数
解释
数值范围
Add
原图片的偏移量0~
Freq
图片左右扭曲的程度，数值大表示扭曲很细密0~
LightStrength
灯光效果，数值大表示图片黑色部分多，是一层一层的显示0~
Phase
左右偏移的方向，正值是图片头向左偏，反之向右偏正负数
Strength
在图片上弯曲的长度，超过图片长度就会出现空隙0~

二、反色效果(Invert)
效果演示：
====>
代码如下：
<STYLE TYPE="TEXT/CSS">
.Invert{ filter:Invert}
</STYLE>
图片里的代码如下:<IMG SRC="pic/little.jpg" CLASS="Invert">
在图片代码中的 CLASS="Invert" 是调用Invert样式，真正起作用的代码是 "filter:Invert"，Invert才是产生这种效果的关键哟：）

三、X光效果(xray)
效果演示：
====>
代码如下：
<STYLE TYPE="TEXT/CSS">
.xray{ filter:xray}
</STYLE>
图片里的代码如下:<IMG SRC="pic/little.jpg" CLASS="xray">
在图片代码中的 CLASS="xray" 是调用xray样式，真正起作用的代码是 "filter:xray"，xray才是产生这种效果的关键哟：）

四、黑白效果(Gray)
效果演示：
====>
代码如下：
<STYLE TYPE="TEXT/CSS">
.Gray{ filter:Gray}
</STYLE>
图片里的代码如下:<IMG SRC="pic/little.jpg" CLASS="Gray">
在图片代码中的 CLASS="Gray" 是调用xray样式，真正起作用的代码是 "filter:Gray"，Gray才是产生这种效果的关键哟：）
#Advertisement