常州网络公司首页 >>> WEB编程 >> DIV+CSS

用CSS滤镜实现图片暗室效果

发布时间:2008-10-23 22:32:53   浏览次数:3557

这次我们利用CSS的几个无参数滤镜Gray滤镜、Invert滤镜和Xray滤镜分别来实现图片的黑白效果、底片效果和X光效果。

黑白效果


代码:

1、内部插入式

在〈head〉与〈/head〉之间插入:


〈style type = text/css〉

.baw{filter:Gray}

〈/style〉

然后在图片属性代码中加class="baw"。

注意:在〈head〉与〈/head〉之间插入代码中,baw前有一个“.”(不包括引号),请一定不要漏掉了。

2、直接插入式

在图片属性代码中加入:


style="filter: Gray"

效果如图1所示。


特点:通过使用CSS的gray滤镜,使彩色图片变为黑白图片。


底片效果

代码:

1、内部插入式

在〈head〉与〈/head〉之间插入:


〈style type = text/css〉

.negative{filter:Invert}

〈/style〉

然后在图片属性代码中加class=" negative "(注意negative前的"."号)。

2、直接插入式

在图片属性代码中加入:


style=" filter: Invert"

效果如图2所示。


特点:通过使用CSS的invert滤镜,使图片出现照片底片的效果。


X光效果


代码:

1、内部插入式

在〈head〉与〈/head〉之间插入:


〈style type = text/css〉

.Xlight{filter:Xray}

〈/style〉

然后在图片属性代码中加class=" Xlight "(注意Xlight前的"."号)。


2、直接插入式


在图片属性代码中加入:


style=" filter: Xray"

效果如图3所示。


特点:通过使用CSS的xray滤镜,使图片出现X光照射的轮廓效果。


至此,我们这个CSS滤镜特效实例就先介绍到这里,CSS滤镜在Dreamweaver中用起来很方便,且能使文字产生一种类似图像的效果,但比起图片来可就“瘦小”多了,除了我们上面说过的,CSS的滤镜还有很多种,利用它们能实现很多不同的效果,会有意想不到的收获哦。

上一条:自适应高度
下一条:用CSS巧控制段落缩进
首页 | 在线留言 | 网站地图

CopyRight ©2008-2014   糊涂蛋技术网    苏ICP备05013073号
站长:万创   QQ:54960248  E-mail:xlxcn#126.com