能者 发表于 2023-8-29 21:00:04

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

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

1. 使用模糊滤镜:使用`blur()`函数来设置模糊程度。
.blur-image {
filter: blur(5px);
}

2. 使用亮度和对比度滤镜:你可以使用`brightness()`函数来调整图像的亮度,使用`contrast()`函数来调整对比度。
.brightness-image {
filter: brightness(150%);
}
.contrast-image {
filter: contrast(200%);
}


3. 使用灰度滤镜:你可以使用`grayscale()`函数将图像转为灰度图。
.grayscale-image {
filter: grayscale(100%);
}

4. 使用透明度滤镜:使用`opacity()`函数来设置图像的透明度。
.opacity-image {
filter: opacity(50%);
}

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


页: [1]
查看完整版本: 前端使用CSS实现图像模糊效果