css3——filter(滤镜)属性

css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的模糊效果、老照片（黑白照片）效果等

语法

filter: none | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() ;

注意：1、当使用多个滤镜时，可以用空格分隔

2、滤镜大多数使用百分比（%）

1、none（默认值，无效果，与原图一样）

代码语句

filter: none;

2、blur（px）——高斯模糊

给图像设置高斯模糊。值越大越模糊；而且边缘也会变得很模糊

如果没有设定值，则默认是0,不模糊；这个参数可设置px，但不接受百分比值！！！

代码语句

filter: blur(10px);

效果图

blur.png

3、brightness(%)——亮度

给图片应用一种线性乘法，使其看起来更亮或更暗。

如果值是0%，图像会全黑；值是100%，则图像无变化；

其他的值对应线性乘数效果：值低于100%，图像会变暗；值超过100%，图像会比原来更亮。如果没有设定值，默认是1。

代码语句

filter: brightness(50%);/*变暗*/
filter: brightness(200%);/*变亮*/

效果图

brightness.png

4、contrast(%)——对比度

调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

对比度是对画面明暗程度的定义，是指画面黑白明暗的层次

代码语句

filter: contrast(50%)/*对比度变暗*/
filter: contrast(200%)/*对比度变亮*/

效果图

contrast.png

5、grayscale(%)——灰度

将图像转换为灰度图像。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

代码语句

grayscale(50%)/*不完全变灰*/
grayscale(100%)/*完全变灰(黑白照片)*/

效果图

grayscale.png

6、hue-rotate(deg)——色相旋转

给图像应用色相旋转。值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

色相环

色相环.png

代码语句

hue-rotate(120deg)/*120度偏绿色*/
hue-rotate(200deg)/*200度偏蓝色*/

效果图

hue-rotate.png

7、invert(%)——反转

反转输入图像。值是100%时是完全反转。值为0%则图像无变化。值是50%时会变成完全灰色，值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

代码语句

invert(40%)/*0%-50%之间，图片会变暗*/
invert(100%)/*50%-100%之间，颜色会反转*/

效果图

invert.png

8、opacity(%)——透明度

转化图像的透明程度。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，若值未设置，值默认是1。

代码语句

opacity(60%)
opacity(10%)

效果图

opacity.png

9、saturate(%)——饱和度

转换图像饱和度。值为0%则是完全不饱和（灰度），值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。

饱和对是对色彩的浓度（纯度）的定义，饱和度画面中色彩的鲜艳程度与层次

代码语句

saturate(40%)/*越小越呈现灰度*/
saturate(200%)/*颜色更饱和，色彩更鲜艳*/

效果图

saturate.png

10、sepia(%)——深褐色

将图像转换为深褐色。值为100%则完全是深褐色的，值为0%图像无变化。值在0%——100%之间；若未设置，值默认是0；

代码语句

filter: sepia(50%);/*浅褐色*/
filter: sepia(100%);/*深褐色，像旧照片*/

效果图

sepia.png

11、多种滤镜混合

代码语句

filter: brightness(120%) contrast(110%) saturate(120%) hue-rotate(-25deg)

效果图

fixed.png