一、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);
}
改变图片的饱和度
时间: 2024-10-28 19:22:24