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

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

这里我们利用CSS的几个无参数滤镜Gray滤镜、Invert滤镜和Xray滤镜分别来实现图片的黑白效果、底片效果和X光效果。
1.黑白效果
代码：
(1)内部插入式:
在〈head〉与〈/head〉之间插入：
〈style type = text/css〉
.baw
{
filter:Gray
}
〈/style〉
然后在图片属性代码中加class="baw"。
注意：在〈head〉与〈/head〉之间插入代码中，baw前有一个“.”(不包括引号)，请一定不要漏掉了。
(2)直接插入式:
在图片属性代码中加入：
style="filter: Gray"
效果如图1所示。

图1

特点：通过使用CSS的Gray滤镜，使彩色图片变为黑白图片。
2.底片效果
代码：
(1)内部插入式:
在〈head〉与〈/head〉之间插入：
〈style type = text/css〉
.negative
{
filter:Invert
}
〈/style〉
然后在图片属性代码中加class=" negative "(注意negative前的“.”号)。
(2)直接插入式:
在图片属性代码中加入：
style=" filter: Invert"
效果如图2所示。

图2

特点：通过使用CSS的invert滤镜，使图片出现照片底片的效果。
3.X光效果
代码：
(1)内部插入式:
在〈head〉与〈/head〉之间插入：
〈style type = text/css〉
.Xlight
{
filter:Xray
}
〈/style〉
然后在图片属性代码中加class=" Xlight "(注意Xlight前的“.”号)。
(2)直接插入式:
在图片属性代码中加入：
style=" filter: Xray"
效果如图3所示。

图3

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

(飞熊)