Aphros的博客
Aphros的博客

背景滤镜——视觉的多彩世界

Aphros Aphros 收录于 网页开发 和 Tailwind CSS
  约 3300 字 预计阅读 7 分钟 - 次阅读   - 条评论  
目录

第 1 节 概述

平面设计大师们常说：层次感来自对比。

颜色深浅的对比、虚实之间的对比、清晰和模糊的对比——这些对比让页面有了深度和节奏。

Tailwind 提供了一整套背景和滤镜工具，让你能用工具类快速制造视觉层次。

第 2 节 纯色背景 

1
2
3

<div class="bg-white">纯白背景</div>
<div class="bg-gray-50">浅灰背景，常用作区块底色</div>
<div class="bg-blue-600 text-white">深色品牌背景，文字需用白色</div>

第 3 节 渐变

3.1 方向

渐变的写法是 bg-gradient-to-{方向}，配合 from-{色}、via-{色}、to-{色}：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div class="h-32 bg-gradient-to-r from-blue-500 to-purple-600">
  从蓝到紫的从左到右渐变
</div>

<div class="h-32 bg-gradient-to-br from-cyan-500 via-blue-500 to-purple-600">
  从青到蓝到紫的对角线渐变
</div>

<div class="h-32 bg-gradient-to-t from-blue-500 to-transparent">
  底部蓝色渐变到透明，常用于图片底部遮罩
</div>
方向类名渐变方向
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

3.2 常用配色组合 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- 科技感 -->
<div class="bg-gradient-to-r from-cyan-500 to-blue-600"></div>

<!-- 温暖感 -->
<div class="bg-gradient-to-r from-orange-500 to-pink-500"></div>

<!-- 优雅感 -->
<div class="bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>

<!-- 自然感 -->
<div class="bg-gradient-to-r from-emerald-500 to-teal-500"></div>
技巧

渐变和按钮、页头搭配效果最好。不要大面积使用饱和度高的渐变，容易引起视觉疲劳。

第 4 节 滤镜

滤镜是给元素加视觉效果，比如模糊、亮度、对比度。

4.1 模糊 

1
2
3
4
5

<img class="blur-none" src="photo.jpg" />     <!-- 清晰 -->
<img class="blur-sm" src="photo.jpg" />        <!-- 稍微模糊 -->
<img class="blur-md" src="photo.jpg" />         <!-- 中等模糊 -->
<img class="blur-lg" src="photo.jpg" />         <!-- 大模糊 -->
<img class="blur-2xl" src="photo.jpg" />        <!-- 非常模糊，用于背景图 -->

模糊最常见的用法：给背景图加模糊，上面显示文字：

1
2
3
4
5
6
7

<div class="relative overflow-hidden rounded-2xl">
  <img class="absolute inset-0 w-full h-full object-cover blur-sm" src="bg.jpg" />
  <div class="relative z-10 p-12 text-center text-white">
    <h2 class="text-3xl font-bold">内容标题</h2>
    <p class="mt-4">背景让文字可读，又保留了视觉氛围。</p>
  </div>
</div>

4.2 亮度 

1
2
3
4

<img class="brightness-100" src="photo.jpg" />  <!-- 原图 -->
<img class="brightness-75" src="photo.jpg" />   <!-- 变暗 -->
<img class="brightness-125" src="photo.jpg" />  <!-- 变亮 -->
<img class="brightness-50 hover:brightness-100" src="photo.jpg" />  <!-- 悬停变亮 -->

4.3 对比度、灰度、饱和度 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- 灰度图，像黑白照片 -->
<img class="grayscale" src="photo.jpg" />

<!-- 悬停恢复彩色，常用于团队成员头像 -->
<img class="grayscale hover:grayscale-0 transition duration-300" src="avatar.jpg" />

<!-- 高饱和度，更鲜艳 -->
<img class="saturate-150" src="photo.jpg" />

<!-- 老照片效果 -->
<img class="sepia" src="photo.jpg" />

第 5 节 毛玻璃效果

毛玻璃（backdrop filter）是 CSS 中非常出效果的一个特性——它模糊的是元素后面的内容，而不是元素本身。

1
2
3

<div class="fixed top-0 inset-x-0 bg-white/70 backdrop-blur-lg border-b border-white/20">
  半透明毛玻璃导航栏
</div>

关键点：

  1. bg-white/70 —— 半透明白色背景
  2. backdrop-blur-lg —— 对后面的内容做模糊
  3. border-white/20 —— 半透明边框增加光泽感

这种效果在苹果的 iOS/macOS 中随处可见，用来做导航栏、浮层、侧边栏效果很好：

images/06-backdrop-blur.svg

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- 毛玻璃卡片 -->
<div class="bg-white/80 backdrop-blur-md rounded-2xl shadow-xl p-8">
  <h2 class="text-xl font-bold">毛玻璃卡片</h2>
  <p class="mt-2 text-gray-600">透过半透明背景，可以看到后面的颜色或图片。</p>
</div>

<!-- 毛玻璃导航栏（深色背景版） -->
<nav class="fixed top-0 inset-x-0 bg-black/30 backdrop-blur-md text-white z-50">
  <div class="max-w-5xl mx-auto flex items-center justify-between px-6 h-16">
    <span class="font-bold">Logo</span>
    <div class="flex gap-6">导航链接</div>
  </div>
</nav>

第 6 节 背景图片 

1
2
3
4
5
6

<!-- 内联样式 -->
<div class="bg-cover bg-center" style="background-image: url('hero.jpg')">
  <!-- 内容 -->
</div>

<!-- 通过配置复用（v4 CSS-first） -->

背景图片的常见辅助类：

类名效果
bg-cover图片覆盖整个容器
bg-contain图片完整显示在容器内
bg-center / bg-top图片对齐位置
bg-no-repeat不重复平铺

第 7 节 实战：升级产品页的视觉效果 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星光科技 · 智能灯</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
  <!-- 毛玻璃导航栏 -->
  <nav class="fixed top-0 inset-x-0 bg-white/70 backdrop-blur-md border-b border-gray-100/50 z-50">
    <div class="max-w-5xl mx-auto flex items-center justify-between px-6 h-16">
      <span class="text-xl font-bold text-gray-900">星光科技</span>
      <div class="flex gap-8 text-gray-600">
        <a href="#" class="hover:text-gray-900">产品</a>
        <a href="#" class="hover:text-gray-900">特性</a>
        <a href="#" class="hover:text-gray-900">用户评价</a>
        <a href="#" class="hover:text-gray-900">联系我们</a>
      </div>
    </div>
  </nav>

  <main class="max-w-5xl mx-auto px-6 pt-32 pb-16">
    <!-- Hero 区域 + 渐变背景 -->
    <div class="bg-gradient-to-br from-blue-50 via-white to-purple-50 rounded-3xl p-16 text-center">
      <h1 class="text-5xl font-extrabold text-gray-900 tracking-tight">
        智能台灯 <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">Lumina</span>
      </h1>
      <p class="mt-6 text-xl text-gray-500 leading-relaxed max-w-2xl mx-auto">
        光线随你而变。一盏懂你的台灯。
      </p>
      <button class="mt-8 px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-lg font-semibold rounded-xl shadow-lg shadow-blue-600/30 hover:shadow-xl hover:shadow-blue-600/40 transition-shadow">
        立即购买
      </button>
    </div>

    <!-- 特性卡片 -->
    <section class="mt-32">
      <h2 class="text-3xl font-bold text-gray-900 text-center">为什么选择 Lumina</h2>
      <div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <div class="p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-100 shadow-md hover:shadow-lg">
          <div class="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-50 rounded-xl flex items-center justify-center">
            <span class="text-2xl">🧠</span>
          </div>
          <h3 class="mt-4 text-xl font-semibold text-gray-900">AI 调光</h3>
          <p class="mt-2 text-gray-500 leading-relaxed">内置传感器实时感知环境光线，自动调整亮度和色温。</p>
        </div>

        <div class="p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-100 shadow-md hover:shadow-lg">
          <div class="w-12 h-12 bg-gradient-to-br from-green-100 to-green-50 rounded-xl flex items-center justify-center">
            <span class="text-2xl">👁️</span>
          </div>
          <h3 class="mt-4 text-xl font-semibold text-gray-900">护眼模式</h3>
          <p class="mt-2 text-gray-500 leading-relaxed">无频闪、低蓝光，通过德国莱茵 TÜV 护眼认证。</p>
        </div>

        <div class="p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-100 shadow-md hover:shadow-lg">
          <div class="w-12 h-12 bg-gradient-to-br from-purple-100 to-purple-50 rounded-xl flex items-center justify-center">
            <span class="text-2xl">🎤</span>
          </div>
          <h3 class="mt-4 text-xl font-semibold text-gray-900">语音控制</h3>
          <p class="mt-2 text-gray-500 leading-relaxed">支持 Siri、小爱同学、Google Assistant 语音指令。</p>
        </div>
      </div>
    </section>

    <!-- 用户评价 -->
    <section class="mt-32">
      <h2 class="text-3xl font-bold text-gray-900 text-center">用户评价</h2>
      <div class="mt-12 divide-y divide-gray-100">
        <div class="py-6 flex gap-4">
          <img class="w-12 h-12 rounded-full grayscale hover:grayscale-0 transition duration-300" src="https://i.pravatar.cc/48?img=1" alt="用户" />
          <div>
            <p class="font-semibold text-gray-900">设计师小王</p>
            <p class="mt-1 text-gray-500">"用了两周，眼睛舒服多了。AI 调光真的很智能。"</p>
          </div>
        </div>
        <div class="py-6 flex gap-4">
          <img class="w-12 h-12 rounded-full grayscale hover:grayscale-0 transition duration-300" src="https://i.pravatar.cc/48?img=2" alt="用户" />
          <div>
            <p class="font-semibold text-gray-900">程序员大刘</p>
            <p class="mt-1 text-gray-500">"晚上写代码的时候，灯光会自动变暖，不刺眼。"</p>
          </div>
        </div>
        <div class="py-6 flex gap-4">
          <img class="w-12 h-12 rounded-full grayscale hover:grayscale-0 transition duration-300" src="https://i.pravatar.cc/48?img=3" alt="用户" />
          <div>
            <p class="font-semibold text-gray-900">学生小林</p>
            <p class="mt-1 text-gray-500">"期末复习全靠它了，灯光可以跟着时间变化。"</p>
          </div>
        </div>
      </div>
    </section>

    <footer class="mt-32 pt-8 border-t border-gray-100 flex items-center justify-between text-sm text-gray-400">
      <span>&copy; 2026 星光科技</span>
      <div class="flex gap-6">
        <a href="#" class="hover:text-gray-600">隐私政策</a>
        <a href="#" class="hover:text-gray-600">服务条款</a>
      </div>
    </footer>
  </main>
</body>
</html>

这一版的变化：

  • 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 鼠标悬停从黑白变彩色
本章小结
  • 渐变用 bg-gradient-to-{方向} from-{色} to-{色}，三个要素缺一不可
  • 毛玻璃用 backdrop-blur-* + 透明背景色，适合导航栏和浮层
  • 滤镜 blur-*、grayscale、brightness-* 控制元素自身外观
  • 渐变文字用 text-transparent bg-clip-text bg-gradient-to-*

页面视觉已经很丰富了。下一篇我们让它动起来——添加过渡和动画效果。

更新于 2026-07-29 
CC BY-NC-SA 4.0
TailwindCSS
返回 | 主页

目录

切换 选择 ESC 关闭
搜索引擎 Fuse.js