背景色属性

简介

背景色属性是 Cosy UI 组件库中的通用属性，用于设置组件的背景颜色。支持基础背景色、透明度变体和渐变色等多种样式。

基础背景色

主题色

primary - 主题色
secondary - 辅助色
accent - 强调色
neutral - 中性色

primary

secondary

accent

neutral

基础色

base-100 - 基础背景色（浅色）
base-200 - 基础背景色（中等）
base-300 - 基础背景色（深色）

base-100

base-200

base-300

状态色

success - 成功色
warning - 警告色
error - 错误色
info - 信息色

success

warning

error

info

特殊值

transparent - 透明背景
none - 无背景

transparent

none

透明度变体

每个基础背景色都支持透明度变体，格式为 颜色/透明度：

透明度值

10 - 10% 透明度
20 - 20% 透明度
30 - 30% 透明度
40 - 40% 透明度
50 - 50% 透明度
60 - 60% 透明度
70 - 70% 透明度
80 - 80% 透明度
90 - 90% 透明度

透明度示例

primary/20 - 主题色 20% 透明度
success/10 - 成功色 10% 透明度
error/30 - 错误色 30% 透明度

primary/10

primary/20

primary/30

primary/50

渐变色

基础渐变

gradient - 默认渐变（主题色到辅助色）
gradient-primary - 主题色渐变
gradient-secondary - 辅助色渐变
gradient-accent - 强调色渐变

gradient

gradient-primary

gradient-secondary

gradient-accent

状态渐变

gradient-success - 成功色渐变
gradient-warning - 警告色渐变
gradient-info - 信息色渐变

gradient-success

gradient-warning

gradient-info

主题渐变

gradient-sky - 天空渐变
gradient-sunset - 日落渐变
gradient-forest - 森林渐变
gradient-ocean - 海洋渐变
gradient-mountain - 山峰渐变

gradient-sky

gradient-sunset

gradient-forest

gradient-ocean

gradient-mountain

水果渐变

gradient-flower - 花朵渐变
gradient-watermelon - 西瓜渐变
gradient-lemon - 柠檬渐变
gradient-grape - 葡萄渐变
gradient-blueberry - 蓝莓渐变
gradient-mango - 芒果渐变
gradient-kiwi - 奇异果渐变
gradient-pitaya - 火龙果渐变
gradient-banana - 香蕉渐变

gradient-flower

gradient-watermelon

gradient-lemon

gradient-grape

gradient-blueberry

gradient-mango

Pattern 背景

基础 Pattern

dot-grid - 点阵网格
stripes - 斜向条纹
gradient-glow - 发光渐变

现代化背景样式

glassmorphism - 玻璃态效果（毛玻璃）
glassmorphism-strong - 强玻璃态效果
glassmorphism-soft - 柔和玻璃态效果
mesh-gradient - 网格渐变（多个径向渐变叠加）
noise - 噪点纹理
noise-strong - 明显噪点纹理
noise-soft - 细腻噪点纹理
animated-gradient - 动态渐变（流动效果）
animated-gradient-fast - 快速动态渐变
animated-gradient-slow - 慢速动态渐变

dot-grid

stripes

gradient-glow

glassmorphism

mesh-gradient

noise

animated-gradient

示例：

<Container background="dot-grid" padding="lg">
  点阵网格背景
</Container>

<Container background="stripes" padding="lg">
  斜向条纹背景
</Container>

<Container background="gradient-glow" padding="lg">
  发光渐变背景
</Container>

<Container background="glassmorphism" padding="lg">
  玻璃态效果背景
</Container>

<Container background="mesh-gradient" padding="lg">
  网格渐变背景
</Container>

<Container background="noise" padding="lg">
  噪点纹理背景
</Container>

<Container background="animated-gradient" padding="lg">
  动态渐变背景
</Container>

使用方法

在组件中使用

<Container background="primary">
  主题色背景
</Container>

<Container background="success/20">
  成功色背景，20% 透明度
</Container>

<Container background="gradient-sky">
  天空渐变背景
</Container>

<Container background="dot-grid">
  Pattern 背景（点阵网格）
</Container>

在构建器模式中使用

const props = ContainerProps()
  .background("primary/20")
  .build();

<Container {...props}>
  构建器模式设置背景
</Container>