HTMLCSSfilter模糊和色彩滤镜的格式语法和应用

HTML/CSS中filter属性的模糊与色彩滤镜语法及应用如下：

一、模糊效果（blur()）

语法格式：filter: blur(半径);
参数：模糊半径，单位为px（如blur(5px)）。
作用：通过高斯模糊实现虚化效果，值越大越模糊。
典型场景：背景图虚化以突出前景内容。
示例：img { filter: blur(3px); /* 图片整体模糊3像素 */}

二、色彩调整滤镜

CSS提供多种色彩类滤镜，支持百分数或数字参数（0-1范围），可单独或组合使用。

灰度（grayscale()）
语法：filter: grayscale(值);
参数：0%（无效果）到100%（完全灰度），或0到1的数字。
示例：.disabled-btn { filter: grayscale(100%); /* 按钮完全灰度显示 */}
亮度（brightness()）
语法：filter: brightness(值);
参数：100%为正常亮度，<100%变暗，>100%提亮。
示例：.dim-image { filter: brightness(50%); /* 图片亮度降低50% */}
对比度（contrast()）
语法：filter: contrast(值);
参数：100%为正常对比度，<100%降低对比，>100%增强对比。
示例：.high-contrast { filter: contrast(150%); /* 对比度增强50% */}
饱和度（saturate()）
语法：filter: saturate(值);
参数：100%为正常饱和度，0%完全去色，>100%更鲜艳。
示例：.vivid-color { filter: saturate(200%); /* 饱和度翻倍 */}
色相旋转（hue-rotate()）
语法：filter: hue-rotate(角度);
参数：旋转角度，单位为deg（如hue-rotate(90deg)）。
示例：.color-shift { filter: hue-rotate(180deg); /* 色相旋转180度 */}

三、多滤镜组合使用

语法：多个滤镜函数用空格分隔，按顺序依次生效。filter: blur(2px) grayscale(50%) brightness(80%);
顺序建议：先模糊后调色（避免色彩调整影响模糊效果）。
典型场景：
悬停取消模糊：img:hover { filter: blur(0); /* 悬停时清除模糊 */}
禁用按钮效果：.btn-disabled { filter: grayscale(100%) opacity(70%); /* 灰度+透明度 */}

四、实用场景扩展

毛玻璃效果：结合backdrop-filter实现背景虚化，需配合半透明背景。.glass-effect { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); /* 背景模糊10像素 */}
夜间模式：通过降低亮度和对比度优化阅读体验。.night-mode { filter: brightness(70%) contrast(90%);}

五、注意事项

通过合理组合模糊与色彩滤镜，可显著提升页面视觉层次，适用于图片美化、状态反馈（如禁用按钮）及背景特效等场景。

热门标签