css中的Gray ,Invert,Xray 滤镜应用指南

本文主要介绍三种滤镜的使用方法：
1、Gray 滤镜
2、Invert 滤镜语法
3、Xray滤镜

1、使用Gray滤镜可以把一张图片变成灰度图，语法很简单：

Gray 滤镜语法
{filter:gray}

代码：

正常图片
<img src="http://www.panpan.org/img/girl.jpg">
加滤镜后的图片：
filter:gray; 灰度图
 <img src="http://www.panpan.org/img/girl.jpg" style="filter:gray" width="180" height="120">

效果：

正常图片

加滤镜后的图片：
filter:gray; 灰度图

2、使用Invert滤镜可以把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值

Invert 滤镜语法
{filter:invert}

代码：
正常图片
<img src="http://www.panpan.org/img/girl.jpg">
加滤镜后的图片：
filter:invert 底片效果
<img src="http://www.panpan.org/img/girl.jpg" style="filter:invert" width="180" height="120">

实例：

正常图片

加滤镜后的图片：
 filter:invert 底片效果

3、使用Xray滤镜可以让对象反映出它的轮廓并把这些轮廓加亮，类似于所谓的“X”光片。

Xray 滤镜语法
{filter:xray}

代码：
正常图片
<img src="http://www.panpan.org/img/girl.jpg">
加滤镜后的图片：
filter:xray X光效果
<img src="http://www.panpan.org/img/girl.jpg" style="filter:xray" width="180" height="120">
 

效果：

正常图片

加滤镜后的图片：
filter:xray X光效果

您看懂了吗？是不是很简单的？