图片置灰、图片模糊处理、元素模糊处理、图片亮度调整

一、前言

• 本篇汇总分享一下比较常见的几个css技巧：图片置灰、图片模糊处理、元素模糊处理、图片亮度调整。
• 包含知识点：filter属性和backdrop-filte属性。

• 注意： filter 属性必须要加在图像上或者背景图上，而 backdrop-filter 只要是一个元素就可以。

二、图片置灰

1.属性详解

• 核心属性：filter: grayscale(100%);
• 值为 100% 则完全转为灰度图像，若为初始值 0% 则图像无变化。值在 0% 到 100% 之间，则是该效果的线性乘数。

2.效果展示

三、图片模糊处理

1.属性详解

• 核心属性：filter: blur(5px);
• 值越大越模糊。

2.效果展示

四、元素模糊处理

1.属性详解

• 核心属性：backdrop-filter: blur(10px);
• 值越大越模糊。
• 简单的实现思路：盒子容器内包含一个定位的模糊盒子，根据需求调整位置，亦可以和容器盒子相同大小，调整权重，达到盒子容器全模糊的效果

2.效果展示

3.效果展示

五、图片亮度调整

1.属性详解

• 核心属性：filter: brightness(.5);
• 值为 0% 将创建全黑图像；值为 100% 会使输入保持不变，如果值大于 100% 将使图像更加明亮。

2.效果展示