
这次我们利用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〉之间插入: