bootstrap 5的渐变背景色和文字颜色

Bootstrap 5 渐变背景色样式！

.bg-gradient-success类使用了绿色系的渐变效果。下面是一些其他常用的 Bootstrap 5 渐变样式：

/* 主要蓝色渐变 */
.bg-gradient-primary {
  background-image: linear-gradient(135deg, #0d6efd 0%, #86b7fe 100%) !important;
}

/* 危险红色渐变 */
.bg-gradient-danger {
  background-image: linear-gradient(135deg, #dc3545 0%, #ff758c 100%) !important;
}

/* 警告黄色渐变 */
.bg-gradient-warning {
  background-image: linear-gradient(135deg, #ffc107 0%, #ffd166 100%) !important;
}

/* 信息蓝色渐变 */
.bg-gradient-info {
  background-image: linear-gradient(135deg, #0dcaf0 0%, #80e5ff 100%) !important;
}

/* 深色渐变 */
.bg-gradient-dark {
  background-image: linear-gradient(135deg, #212529 0%, #495057 100%) !important;
}

/* 紫色渐变 */
.bg-gradient-purple {
  background-image: linear-gradient(135deg, #6f42c1 0%, #a370f7 100%) !important;
}
/* 绿色渐变 */
.bg-gradient-success {
  background-image: linear-gradient(135deg, #198754 0%, #20c997 100%) !important;
}

安全搭配的文字颜色

在 Bootstrap 5 中，为了确保渐变背景上的文字清晰可读，您可以使用以下文字颜色类来搭配您的 .bg-gradient-* 背景：

1. 白色文字 (text-white)

   适用于大多数深色或鲜艳的渐变背景：

   <div class="bg-gradient-success text-white p-4">
      成功渐变背景 + 白色文字
   </div>

2. 浅色文字 (text-light)

   适用于非常深的背景（如 .bg-gradient-dark）：

   <div class="bg-gradient-dark text-light p-4">
      深色渐变背景 + 浅色文字
   </div>

3. 黑色文字 (text-dark)

   适用于浅色渐变背景（如 .bg-gradient-warning）：

      警告渐变背景 + 黑色文字
   </div>

4. Bootstrap 5 的对比色 (text-bg-*)

   Bootstrap 5 提供了 text-bg-* 类，可以自动适配背景色和文字颜色：

   <div class="bg-gradient-success text-bg-success p-4">
      自动适配文字颜色（推荐）
   </div>

5. 文字阴影 (text-shadow)

   如果文字在渐变背景上不够突出，可以添加阴影增强可读性：

   .text-with-shadow {
       text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   }
   
   <div class="bg-gradient-primary text-white text-with-shadow p-4">
      带阴影的白色文字
   </div>
   

推荐搭配方案

渐变背景类 推荐文字颜色 适用场景

.bg-gradient-primary text-white 深蓝色背景

.bg-gradient-success text-white 绿色背景

.bg-gradient-danger text-white 红色背景

.bg-gradient-warning text-dark 黄色/橙色背景

.bg-gradient-info text-white 或 text-dark 浅蓝色背景

.bg-gradient-dark text-light 深灰/黑色背景

最佳实践

• 深色背景 → 白色/浅色文字（如 text-white）

• 浅色背景 → 黑色/深色文字（如 text-dark）

• 中等亮度背景 → 使用 text-bg-* 自动适配

• 复杂渐变 → 可加 text-shadow 增强可读性

这样搭配可以确保 UI 清晰美观，同时符合 WCAG 无障碍标准（对比度达标）。