前端使用CSS实现图像模糊效果

能者

要使用CSS实现图像模糊效果，可以使用`filter`属性。下面是一些常用的方法：

1. 使用模糊滤镜：使用`blur()`函数来设置模糊程度。

[CSS] 纯文本查看 复制代码

.blur-image {
  filter: blur(5px);
}

2. 使用亮度和对比度滤镜：你可以使用`brightness()`函数来调整图像的亮度，使用`contrast()`函数来调整对比度。

[CSS] 纯文本查看 复制代码

.brightness-image {
  filter: brightness(150%);
}
.contrast-image {
  filter: contrast(200%);
}

3. 使用灰度滤镜：你可以使用`grayscale()`函数将图像转为灰度图。

[CSS] 纯文本查看 复制代码

.grayscale-image {
  filter: grayscale(100%);
}

4. 使用透明度滤镜：使用`opacity()`函数来设置图像的透明度。

[CSS] 纯文本查看 复制代码

.opacity-image {
  filter: opacity(50%);
}

你可以根据需要组合使用这些滤镜效果，也可以在同一个元素上应用多个滤镜。请注意，某些滤镜效果可能不被所有浏览器所支持，因此最好先进行测试以确保在目标浏览器中正常显示。