中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
网站建设
中国福网
招聘求职
中国互联
艺魂宝库网
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> CSS滤镜实现图片暗室效果

CSS滤镜实现图片暗室效果 (1)

来源:中国设计秀    作者:    点击:204     加入收藏

   这次我们利用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"

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

底片效果

代码:

1、内部插入式

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

〈style type = text/css〉

.negative{filter:Invert}

〈/style〉

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

2、直接插入式

在图片属性代码中加入:

style=" filter: Invert"

 

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

X光效果

代码:

1、内部插入式

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

0
顶一下
[1] [2]
2007-10-22 12:29:00    出处:
Google