如何在Tailwind CSS中实现带磨砂质感的侧边导航栏_通过backdrop-saturate滤镜-css教程-PHP中文网

磨砂效果需 backdrop-blur、半透明背景和 backdrop-saturate 三者协同：单独 backdrop-saturate-150 仅增艳不模糊，无通透感；正确组合为 backdrop-blur-md backdrop-saturate-125 bg-white/10，且须配置 tailwind.config.js 并加 -webkit-backdrop-filter 兼容 safari。

如何在tailwind css中实现带磨砂质感的侧边导航栏_通过backdrop-saturate滤镜

单独加 backdrop-saturate 不会产生磨砂效果，它只是调色，不是模糊——必须和 backdrop-blur + 半透明背景一起用才成立。

为什么 backdrop-saturate-150 单独写没“毛玻璃感”

backdrop-saturate 本身不模糊、不透明，只调整背后内容的色彩饱和度。你看到的“磨砂感”，其实是三者共同作用的结果：模糊让细节失焦，半透背景提供通透基底，饱和度微调则让颜色更温润、避免灰白发冷。

单独写 backdrop-saturate-150：背后图片会变艳，但边缘锐利、无通透感，不是磨砂
正确组合是：backdrop-blur-md backdrop-saturate-125 bg-white/10
饱和度值建议控制在 110–130 之间：超过 150 容易发荧光，低于 100 则偏灰闷

tailwind.config.js 必须同时配置 backdropBlur 和 backdropSaturate

Tailwind 默认不包含 backdrop-saturate 工具类，且它和 backdropBlur 是两个独立配置项——漏掉任一，组合就失效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

在 theme.extend 下同时添加两者，backdropSaturate 值只能是数字（代表百分比），不能带 % 符号
示例配置：

@config
theme: {
  extend: {
    backdropBlur: {
      sm: '4px',
      md: '8px',
      lg: '12px',
    },
    backdropSaturate: {
      110: '110',
      125: '125',
      130: '130',
    }
  }
}

改完后必须清缓存并重构建（如 npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch）
验证方式：搜索生成的 CSS 文件中是否有 backdrop-filter: blur(8px) saturate(1.25)

Safari 兼容性问题：-webkit-backdrop-filter 不能省

即使 Tailwind 配置正确、类名也写了，Safari ≤16.6 仍会完全不渲染——因为它只认 -webkit-backdrop-filter。

最稳妥做法是定义自定义工具类，同时覆盖标准属性和 WebKit 前缀：

@layer utilities {
  .glass-sidebar {
    @apply bg-white/10 backdrop-blur-md backdrop-saturate-125;
    -webkit-backdrop-filter: blur(8px) saturate(1.25);
  }
}