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

CSS filter 属性可为元素添加模糊、灰度、亮度等视觉效果。blur() 函数通过像素值实现高斯模糊，常用于背景虚化；grayscale()、brightness()、contrast()、saturate() 和 hue-rotate() 可调整色彩表现，支持百分数或数字参数；多个滤镜可组合使用，以空格分隔并按顺序生效，建议先模糊后调色；常用场景包括图片悬停清除模糊、禁用按钮灰度显示、背景毛玻璃效果（配合 backdrop-filter）等；该属性兼容性良好，是提升页面视觉层次的轻量手段。

在网页设计中，CSS filter 属性可以为元素添加视觉特效，比如模糊、调整色彩等。它常用于图片、背景或整个容器的美化处理。下面介绍模糊和常见色彩滤镜的语法格式与实际应用方式。

filter 模糊效果（blur）

blur() 函数用于给图像或元素添加高斯模糊效果，值越大越模糊。

filter: blur(半径);

半径单位通常使用 px，例如 blur(5px) 表示模糊半径为5像素。

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

示例：

img {
  filter: blur(3px);
}

这会让图片整体变得模糊，常用于背景图虚化，突出前景内容。

色彩调整滤镜（grayscale、brightness、contrast 等）

CSS 提供多种色彩类滤镜，可单独使用也可组合使用。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情

• grayscale(值)：转换为灰度图像。0% 无效果，100% 完全灰度。可使用百分数或 0-1 的数字（如 1 表示 100%）。
• brightness(值)：调整亮度。100% 正常亮度，小于则变暗，大于则变亮（如 brightness(1.5) 提亮50%）。
• contrast(值)：调整对比度。100% 正常，低于则降低对比，高于则增强。
• saturate(值)：饱和度。100% 正常，0% 完全去色，超过100% 更鲜艳。
• hue-rotate(角度)：色相旋转，单位 deg，如 hue-rotate(90deg) 改变颜色色调。

示例：

.dim {
  filter: brightness(50%) contrast(120%);
}

这个类会让元素变暗并增强对比，适合用于悬停效果或夜间模式。

多个滤镜组合使用

多个 filter 函数可以用空格分隔，按顺序依次应用。

filter: blur(2px) grayscale(50%) brightness(80%);

注意顺序会影响最终效果，一般建议先模糊再调色。

实用场景：

• 图片悬停时取消模糊：
  img:hover { filter: blur(0); }
• 禁用状态按钮变灰：
  .btn-disabled { filter: grayscale(100%) opacity(70%); }
• 背景毛玻璃效果（常配合 backdrop-filter）：
  .glass {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
  }

基本上就这些。filter 属性兼容性良好，现代浏览器基本都支持，是实现视觉增强的轻量方法。不复杂但容易忽略细节，比如单位和顺序。合理使用能让页面更有层次感。

以上就是HTMLCSSfilter模糊和色彩滤镜的格式语法和应用的详细内容，更多请关注php中文网其它相关文章！