非常好玩又实用的css属性filter

你还在为图片实现模糊效果、黑白效果、透明效果、亮度效果、对比效果、饱和度效果、反转效果等问题发愁吗？一个css属性教你解决！

原图：

1、blur （模糊效果），值为px，值越大越模糊

img {
   filter: blur(2px);
}

2、opacity（透明效果），值在0-1之间，0为完全透明，1为原图

img {
    filter: opacity(0.5);
}

 3、grayscale（黑白效果），值在0-1之间，0为原图，1为完全变灰（0%-100%）

img {
    filter: grayscale(1);
}

 

 4、sepia（褐色效果），值在0-1之间，0为原图，1为完全变褐（0%-100%）

img {
    filter: sepia(1);
}

 5、saturate（饱和度效果），值不为负数，1为原图（百分比也可以，1=100%）

取值为 0（0%） 时，图片是完全变灰与 filter: grayscale(1) 一致；

当值大于 1（100%）时：

img {
    filter: saturate(3);
}

 6、invert（反转效果），值在0-1之间，0为原图，1为完全反转（0%-100%）

img {
    filter: invert(100%);
}

7、brightness（亮度效果），值不为负数，1为原图（百分比也可以，1=100%）

超过1，图会更明亮，0-1相当于遮罩效果

使用 filter: brightness(0.5); 就无须额外制作遮罩

img {
    filter: brightness(0.5);
}

img {
    filter: brightness(2);
}

 

 8、contrast（对比效果），值不为负数，1为原图（百分比也可以，1=100%）

超过1时，对比度增大，取值0-1时，对比度降低

img {
    filter: contrast(0.2);
}

img {
    filter: contrast(1.8);
}

9、drop-shadow(h-shadow v-shadow blur spread color)（阴影效果）

这个滤镜类似 box-shadow 属性。

• h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。

• v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。

blur -可选。这是第三个值，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。

spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。

注释：Chrome、Safari 和 Opera，也许还有其他浏览器，不支持第 4 个长度；如果添加，则不会呈现。

color - 可选。为阴影添加颜色。如果未规定，则颜色取决于浏览器（通常为黑色）。

img {
    filter: drop-shadow(8px 8px 10px gray);
}

10、hue-rotate（色彩反转），值为 0deg-360deg，0deg和360deg为原图

img {
    filter: hue-rotate(180deg);
}

11、多个滤镜

要使用多个滤镜，请用空格分隔每个滤镜。请注意，顺序很重要（例如在 sepia() 之后使用 grayscale() 将产生完全灰色的图像）：

img {
    filter: contrast(200%) brightness(150%);
}

 看了这些效果，想不想动手试一下？马上动起来吧，满足自己好奇心！