在css中，Filter: blur()和opacity的作用机制和效果不同。1. blur()通过高斯模糊软化元素边缘，数值越大模糊程度越高，适用于背景虚化、毛玻璃风格界面，但会影响布局性能；2. opacity通过调整透明度使元素整体变淡，取值0到1，适用于悬停渐隐、禁用状态反馈，不影响布局且性能影响小；3. 两者可叠加使用，blur()适合视觉装饰，opacity更适合交互反馈，结合backdrop-filter与rgba可实现复杂效果。
在css中，filter: blur() 和 opacity 是两种常见的视觉效果属性，它们都能改变元素的外观，但作用机制和最终呈现的效果差别挺大的。
1. blur()：模糊处理，影响的是清晰度
filter: blur() 主要用于给元素添加高斯模糊效果。数值越大，模糊程度越高。比如：
.blur-example { filter: blur(5px); }
- 它会“软化”边缘，让图像或文字看起来像是隔着一层毛玻璃。
- 常用于背景虚化、卡片组件的模糊层等。
- 注意：模糊会影响布局性能，尤其是大范围使用时。
适用场景举例：
立即学习“前端免费学习笔记（深入）”；
- 模态框背景虚化（结合 backdrop-filter）
- 创建毛玻璃（glassmorphism）风格界面
2. opacity：透明度控制，影响的是可见度
opacity 控制元素整体的透明度，取值从0到1，0是完全透明，1是完全不透明：
.transparent-example { opacity: 0.5; }
- 它不会改变形状或边缘，只是让颜色“变淡”，甚至能看到背后的内容。
- 透明度会影响子元素，如果父元素设置了 opacity，所有子元素也会继承这个透明度。
常见用途包括：
- 图片或按钮悬停时的渐隐效果
- 禁用状态下的视觉反馈（比如灰色半透明遮罩）
3. 视觉效果对比与使用建议
虽然两者都改变了视觉呈现，但它们的作用方式完全不同：
| 特性 | blur() | opacity |
|---|---|---|
| 改变内容 | 模糊内容本身 | 调整透明度 |
| 是否影响布局 | 否 | 否 |
| 性能影响 | 相对较高（尤其大图） | 几乎没有 |
| 可叠加使用 | ✅ 常见于现代ui设计 | ✅ 可与其他滤镜一起使用 |
一些实际应用小技巧：
- 如果想实现“背景模糊 + 半透明”的效果，可以考虑结合 backdrop-filter: blur(10px) 和 background-color: rgba(255,255,255,0.5)。
- 使用 blur() 时注意不要过度，否则可能造成页面卡顿。
- opacity 更适合做交互反馈，比如 hover 或 loading 状态。
基本上就这些。两个属性各有用处，关键在于理解它们的视觉表现和适用场景。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
