CSS filter 属性可实现模糊、亮度、对比度等视觉效果。1. blur() 设置高斯模糊，数值越大越模糊；2. brightness() 调整明暗，百分比低于100%变暗，高于100%变亮；3. contrast() 改变对比度，0%为灰色，高于100%增强对比；4. 多个函数可用空格分隔组合使用，如模糊加调亮。示例：.frosted-glass { filter: blur(8px) brightness(90%) contrast(110%); } 注意过度使用可能影响可读性，需根据场景调整参数。
使用 CSS filter 属性可以轻松实现图像或元素的模糊、亮度、对比度等视觉效果调整。它适用于图片、背景、文字甚至视频，只需在目标元素上添加相应的 filter 函数即可。
1. 模糊（Blur）
通过 blur() 函数为元素添加高斯模糊效果，参数是模糊半径，单位为 px。
说明：数值越大，模糊程度越高 值为 0 表示无模糊
示例：
稿定抠图
AI自动消除图片背景
76 查看详情 
img { filter: blur(5px);}
2. 亮度调整（Brightness）
使用 brightness() 函数控制元素的明暗程度。
立即学习“前端免费学习笔记（深入）”；
说明：brightness(100%) 表示原始亮度 小于 100% 变暗，如 brightness(50%) 大于 100% 变亮，如 brightness(150%) 值为 0% 时元素全黑，超过 100% 会显得更亮甚至发白
示例：
.darken { filter: brightness(30%);}
3. 对比度调整（Contrast）
用 contrast() 函数增强或减弱颜色对比。
说明：contrast(100%) 保持原样 低于 100% 降低对比，如 contrast(50%) 高于 100% 提升对比，如 contrast(200%) 设为 0% 时所有像素变为灰色
示例：
.high-contrast { filter: contrast(180%);}
4. 组合多个效果
你可以将多个 filter 函数写在一起，用空格分隔。
常见组合：模糊 + 降低亮度：用于模态框背景 提高亮度 + 增强对比：突出显示图片
示例：
.frosted-glass { filter: blur(8px) brightness(90%) contrast(110%);}
基本上就这些。CSS filter 使用简单，性能也不错，适合做轻量级视觉处理。注意过度模糊或高亮度可能影响可读性，建议结合实际场景微调参数。
以上就是如何用css filter实现模糊、亮度、对比度调整的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1026812.html
微信扫一扫 
支付宝扫一扫 
