如何通过css filter实现模糊与亮度效果

CSS filter 属性可实现图像或元素的模糊与亮度调整，1. 使用 blur() 函数设置高斯模糊半径，如 img { filter: blur(5px); } 用于背景虚化；2. brightness() 函数调节亮度，参数为百分比或倍数，如 50% 变暗、150% 变亮；3. 多个滤镜可组合使用，如 filter: blur(4px) brightness(70%) 实现毛玻璃效果；4. 结合 transition 可添加过渡动画，使 hover 时的滤镜变化更平滑。合理运用能提升界面视觉体验。

使用 CSS 的 filter 属性可以轻松实现图像或元素的模糊和亮度调整效果。这个属性适用于图片、背景、文字、视频等几乎所有 HTML 元素，非常适合做视觉增强或交互反馈。

1. 实现高斯模糊（blur）

通过 blur() 函数对元素应用高斯模糊，参数为模糊半径，值越大越模糊。

img {
  filter: blur(5px);
}

常用于模态弹窗背后的背景虚化，或鼠标悬停时的动态模糊效果。

2. 调整亮度（brightness）

brightness() 函数用于改变元素的亮度。参数为百分比或倍数：
- 100% 或 1 表示原始亮度
- 小于 100% 变暗（如 50%）
- 大于 100% 变亮（如 150% 或 1.5）

.dim {
  filter: brightness(30%);
}

.brighten {
  filter: brightness(1.8);
}

3. 组合模糊与亮度效果

你可以将多个 filter 函数组合使用，用空格分隔。

立即学习“前端免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

.frosted-glass {
  background: url("image.jpg");
  filter: blur(4px) brightness(70%);
}

这种组合常用于毛玻璃（frosted glass）效果或提示性蒙层。

4. 添加过渡动画提升体验

结合 transition 可以让滤镜变化更自然。

.card img {
  filter: blur(3px) brightness(60%);
  transition: filter 0.4s ease;
}

.card img:hover {
  filter: blur(0) brightness(100%);
}

这样用户交互时视觉反馈更柔和。

基本上就这些。CSS filter 简单高效，模糊和亮度是其中最实用的功能之一，合理使用能显著提升界面质感。

以上就是如何通过css filter实现模糊与亮度效果的详细内容，更多请关注php中文网其它相关文章！