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

科技前沿 • 2025-02-22 09:38 • 阅读 57

大家好，我是讯享网，很高兴认识大家。

你还在为图片实现模糊效果、黑白效果、透明效果、亮度效果、对比效果、饱和度效果、反转效果等问题发愁吗？一个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%); }