CSS3 Fliter的十种特效（一）

一、grayscale灰度

使用这个特效，会把图片变成灰色的，如果你在grayscale()中没有任何参数值，将会以默认值“100%”渲染。其效果下图所示：

代码：

#gray{
-webkit-filter:grayscale(1);
}

如果你在grayscale()中设置参数值，将会出现由彩色向黑白两色变化，效果图如下：

代码：

#gray{
-webkit-filter:grayscale(0.5);
}

二、sepia棕色、褐色

使用这个特效，使画面整体泛棕褐色，通常能使图片有种怀旧的感觉。效果图如下：

 

代码：

 

#gray{
-webkit-filter:sepia(1);
}

如果你在sepia()中设置参数值，将会出现由彩色向棕褐色变化，效果图如下：

 

 

代码：

#gray{
-webkit-filter:sepia(0.7);
}

三、saturate饱和度

使用这个特效，会改变图片的饱和度，其效果下图所示：

代码：

 

#gray{
-webkit-filter:saturate(5);
}

 

四、hue-rotate色相旋转

hue-rotate用来改变图片的色相其效果如下图所示：

 

代码：

 

#gray{
-webkit-filter:hue-rotate(80deg);
}

五、invert反色

invert做出来的效果就像是我们照相机底片的效果一样，其效果如下图所示：

代码：

 

#gray{
-webkit-filter:invert(1);
}

 

 

 

 

 

改变图片的饱和度