SuperAPI AI 工具集

tailwindcss-backgrounds

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:该技能面向 Tailwind CSS v4.3,整理背景相关工具类,用于设置背景色、构建线性/径向/锥形渐变、设置背景图片及其位置、尺寸、重复方式与混合模式。

主要能力:背景色使用 bg-{color},默认调色板采用 OKLCH,包含中性色(slate、gray、zinc、neutral、stone)与自 v4.2 起的着色中性色(mauve、olive、mist、taupe),以及红橙黄绿蓝紫等彩色系,每种 11 个色阶(50 至 950)。线性渐变使用 bg-linear-,支持八个方向(bg-linear-to-t、to-tr、to-r、to-br、to-b、to-bl、to-l、to-tl)与自定义角度(如 bg-linear-45、bg-linear-180)。径向渐变使用 bg-radial-,锥形渐变(自 v4.0 起)使用 bg-conic-,例如 bg-conic-0、bg-conic-45、bg-conic-[from_45deg]。色标由 from-、via-、to- 控制,可指定自定义位置如 from-0%、to-100%。背景图片用 bg-[url(...)] 应用。尺寸支持 bg-cover、bg-contain 及自定义 bg-[size:10rem]、bg-[size:50%]、bg-[size:200px_100px]。定位支持 bg-top-left、bg-top、bg-top-right、bg-left、bg-center、bg-right、bg-bottom-left、bg-bottom、bg-bottom-right 及自定义 bg-[position:25%_75%]。重复支持 bg-repeat、bg-repeat-x、bg-repeat-y、bg-no-repeat。混合模式支持 bg-blend-multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity。

使用方式:在元素上组合上述工具类即可,例如背景色加透明度用 bg-slate-900/50;图片叠加渐变用 bg-[url(...)] bg-cover bg-center bg-linear-to-br from-black/40 to-transparent;多色标用 from-emerald-500 from-0% via-blue-500 via-50% to-purple-600 to-100%。自定义可在 Tailwind 配置的 theme.extend 中扩展 colors 与 backgroundImage,例如新增 brand 色阶或 gradient 背景图。

适用场景与限制:适用于需要背景配色、渐变装饰、图片铺陈与混合效果的界面样式开发。资料中的性能建议包括:优先使用颜色工具类而非十六进制值、结合 bg-no-repeat 与尺寸避免意外重复、用透明度修饰符 /50 代替 rgba、能用锥形/径向渐变时优先于图片。资料未提供收费、平台或效果保证等说明;其他细节暂未提供。