# 背景滤镜——视觉的多彩世界 ## 概述 平面设计大师们常说：**层次感来自对比**。 颜色深浅的对比、虚实之间的对比、清晰和模糊的对比——这些对比让页面有了深度和节奏。 Tailwind 提供了一整套背景和滤镜工具，让你能用工具类快速制造视觉层次。 ## 纯色背景 ```html
纯白背景
浅灰背景，常用作区块底色
深色品牌背景，文字需用白色
``` ## 渐变 ### 方向 渐变的写法是 `bg-gradient-to-{方向}`，配合 `from-{色}`、`via-{色}`、`to-{色}`： ```html
从蓝到紫的从左到右渐变
从青到蓝到紫的对角线渐变
底部蓝色渐变到透明，常用于图片底部遮罩
``` | 方向类名 | 渐变方向 | |----------|----------| | `bg-gradient-to-t` | 从下到上 | | `bg-gradient-to-r` | 从左到右 | | `bg-gradient-to-b` | 从上到下 | | `bg-gradient-to-l` | 从右到左 | | `bg-gradient-to-tr` | 从下到右上 | | `bg-gradient-to-bl` | 从右上到左下 | ![](images/06-gradients.svg) ### 常用配色组合 ```html
``` > [!tip] 技巧 > 渐变和按钮、页头搭配效果最好。不要大面积使用饱和度高的渐变，容易引起视觉疲劳。 ## 滤镜 滤镜是给元素加视觉效果，比如模糊、亮度、对比度。 ### 模糊 ```html ``` 模糊最常见的用法：**给背景图加模糊，上面显示文字**： ```html

内容标题

背景让文字可读，又保留了视觉氛围。

``` ### 亮度 ```html ``` ### 对比度、灰度、饱和度 ```html ``` ## 毛玻璃效果 毛玻璃（backdrop filter）是 CSS 中非常出效果的一个特性——它模糊的是元素**后面**的内容，而不是元素本身。 ```html
半透明毛玻璃导航栏
``` 关键点： 1. `bg-white/70` —— 半透明白色背景 2. `backdrop-blur-lg` —— 对后面的内容做模糊 3. `border-white/20` —— 半透明边框增加光泽感 这种效果在苹果的 iOS/macOS 中随处可见，用来做导航栏、浮层、侧边栏效果很好： ![](images/06-backdrop-blur.svg) ```html

毛玻璃卡片

透过半透明背景，可以看到后面的颜色或图片。

``` ## 背景图片 ```html
``` 背景图片的常见辅助类： | 类名 | 效果 | |------|------| | `bg-cover` | 图片覆盖整个容器 | | `bg-contain` | 图片完整显示在容器内 | | `bg-center` / `bg-top` | 图片对齐位置 | | `bg-no-repeat` | 不重复平铺 | ## 实战：升级产品页的视觉效果 ```html 星光科技 · 智能灯

智能台灯 Lumina

光线随你而变。一盏懂你的台灯。

为什么选择 Lumina

🧠

AI 调光

内置传感器实时感知环境光线，自动调整亮度和色温。

👁️

护眼模式

无频闪、低蓝光，通过德国莱茵 TÜV 护眼认证。

🎤

语音控制

支持 Siri、小爱同学、Google Assistant 语音指令。

用户评价

用户

设计师小王

"用了两周，眼睛舒服多了。AI 调光真的很智能。"

用户

程序员大刘

"晚上写代码的时候，灯光会自动变暖，不刺眼。"

用户

学生小林

"期末复习全靠它了，灯光可以跟着时间变化。"

``` 这一版的变化： - Hero 区域加了 `bg-gradient-to-br from-blue-50 via-white to-purple-50` 的渐变背景 - 品牌名 "Lumina" 用 `text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600` 实现渐变文字 - 按钮也从纯色改为渐变 `from-blue-600 to-purple-600` - 导航栏加了 `bg-white/70 backdrop-blur-md` 实现毛玻璃效果 - 卡片图标背景改为渐变 - 用户头像 `grayscale hover:grayscale-0` 鼠标悬停从黑白变彩色 > [!summary] 本章小结 > - 渐变用 `bg-gradient-to-{方向} from-{色} to-{色}`，三个要素缺一不可 > - 毛玻璃用 `backdrop-blur-*` + 透明背景色，适合导航栏和浮层 > - 滤镜 `blur-*`、`grayscale`、`brightness-*` 控制元素自身外观 > - 渐变文字用 `text-transparent bg-clip-text bg-gradient-to-*` --- 页面视觉已经很丰富了。下一篇我们让它**动起来**——添加过渡和动画效果。 --- > 作者: Aphros > URL: https://blog.papergate.top/posts/06.%E8%83%8C%E6%99%AF%E6%BB%A4%E9%95%9C%E8%A7%86%E8%A7%89%E7%9A%84%E5%A4%9A%E5%BD%A9%E4%B8%96%E7%95%8C/