Tailwind CSS 背景 #

<div class="bg-white">白色背景</div>
<div class="bg-gray-100">浅灰背景</div>
<div class="bg-blue-500">蓝色背景</div>
<div class="bg-red-500">红色背景</div>

<!-- 使用斜杠语法 -->
<div class="bg-blue-500/50">50% 透明度</div>
<div class="bg-blue-500/75">75% 透明度</div>

<!-- 任意透明度 -->
<div class="bg-blue-500/[0.25]">25% 透明度</div>

<div class="bg-transparent">透明背景</div>

<div class="text-blue-500">
  <div class="bg-current p-4 text-white">
    使用当前颜色作为背景
  </div>
</div>

<div class="bg-[url('/image.jpg')] bg-cover bg-center h-64">
  图片背景
</div>

<!-- 线性渐变 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">
  从左到右渐变
</div>

<!-- 向上 -->
<div class="bg-gradient-to-t from-blue-500 to-purple-500">向上</div>

<!-- 向右上 -->
<div class="bg-gradient-to-tr from-blue-500 to-purple-500">右上</div>

<!-- 向右 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">向右</div>

<!-- 向右下 -->
<div class="bg-gradient-to-br from-blue-500 to-purple-500">右下</div>

<!-- 向下 -->
<div class="bg-gradient-to-b from-blue-500 to-purple-500">向下</div>

<!-- 向左下 -->
<div class="bg-gradient-to-bl from-blue-500 to-purple-500">左下</div>

<!-- 向左 -->
<div class="bg-gradient-to-l from-blue-500 to-purple-500">向左</div>

<!-- 向左上 -->
<div class="bg-gradient-to-tl from-blue-500 to-purple-500">左上</div>

<!-- 两色渐变 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">
  两色渐变
</div>

<!-- 三色渐变 -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  三色渐变
</div>

<!-- 透明渐变 -->
<div class="bg-gradient-to-r from-transparent to-blue-500">
  透明渐变
</div>

<div class="bg-gradient-to-r from-blue-500/50 to-purple-500/50">
  半透明渐变
</div>

<div class="bg-none">无背景图片</div>

<div class="bg-center">居中</div>
<div class="bg-top">顶部</div>
<div class="bg-bottom">底部</div>
<div class="bg-left">左侧</div>
<div class="bg-right">右侧</div>
<div class="bg-left-top">左上</div>
<div class="bg-right-top">右上</div>
<div class="bg-left-bottom">左下</div>
<div class="bg-right-bottom">右下</div>

<div class="bg-[center_top_1rem]">自定义位置</div>

<!-- 自动 -->
<div class="bg-auto">原始大小</div>

<!-- 覆盖 -->
<div class="bg-cover">覆盖容器</div>

<!-- 包含 -->
<div class="bg-contain">完整显示</div>

<!-- 重复（默认） -->
<div class="bg-repeat">重复</div>

<!-- 不重复 -->
<div class="bg-no-repeat">不重复</div>

<!-- 水平重复 -->
<div class="bg-repeat-x">水平重复</div>

<!-- 垂直重复 -->
<div class="bg-repeat-y">垂直重复</div>

<!-- 圆形重复 -->
<div class="bg-round">圆形重复</div>

<!-- 空间重复 -->
<div class="bg-space">空间重复</div>

<!-- 滚动（默认） -->
<div class="bg-fixed">固定背景</div>

<!-- 固定 -->
<div class="bg-scroll">滚动背景</div>

<!-- 本地 -->
<div class="bg-local">本地滚动</div>

<!-- 内边距框 -->
<div class="bg-origin-padding">内边距框</div>

<!-- 边框框 -->
<div class="bg-origin-border">边框框</div>

<!-- 内容框 -->
<div class="bg-origin-content">内容框</div>

<!-- 边框框（默认） -->
<div class="bg-clip-border">边框框</div>

<!-- 内边距框 -->
<div class="bg-clip-padding">内边距框</div>

<!-- 内容框 -->
<div class="bg-clip-content">内容框</div>

<!-- 文本 -->
<div class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500">
  渐变文字
</div>

<button class="px-6 py-2 bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-full hover:from-pink-600 hover:to-purple-600">
  渐变按钮
</button>

<div class="bg-gradient-to-br from-purple-500 to-pink-500 p-6 rounded-lg text-white">
  <h3 class="text-xl font-bold">渐变卡片</h3>
  <p class="mt-2">漂亮的渐变背景效果</p>
</div>

<div class="bg-gradient-to-r from-blue-600 to-purple-600 min-h-screen flex items-center justify-center">
  <div class="text-center text-white">
    <h1 class="text-5xl font-bold mb-4">欢迎来到我们的网站</h1>
    <p class="text-xl mb-8">创建美好的用户体验</p>
    <button class="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100">
      开始探索
    </button>
  </div>
</div>

<div class="relative h-64 bg-cover bg-center rounded-lg" style="background-image: url('/image.jpg')">
  <div class="absolute inset-0 bg-black/50 rounded-lg"></div>
  <div class="relative z-10 p-6 text-white">
    <h3 class="text-2xl font-bold">图片标题</h3>
    <p class="mt-2">图片描述内容</p>
  </div>
</div>

<h1 class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500">
  渐变文字效果
</h1>

<div class="h-screen bg-fixed bg-cover bg-center" style="background-image: url('/image.jpg')">
  <div class="h-screen flex items-center justify-center bg-black/30">
    <h1 class="text-5xl font-bold text-white">视差滚动效果</h1>
  </div>
</div>

<div class="bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:24px_24px]">
  网格背景效果
</div>

<div class="bg-[radial-gradient(#cbd5e1_1px,transparent_1px)] bg-[size:16px_16px]">
  点状背景效果
</div>