Tui Plus Vapor

Appearance

VaporCSS background样式写法参考 ​

背景颜色 ​

设置元素的背景颜色：

类名生成的 CSS备注
bg-redbackground-color: red;设置元素的背景颜色为红色
bgnbackground-color: transparent;设置元素的背景颜色为透明

颜色系统集成 ​

VaporCSS 与主题系统集成，支持使用预设的颜色变量：

类名生成的 CSS备注
bg-primarybackground-color: var(--primary);使用主题中的主色
bg-secondarybackground-color: var(--secondary);使用主题中的次色
bg-successbackground-color: var(--success);使用主题中的成功色
bg-warningbackground-color: var(--warning);使用主题中的警告色
bg-dangerbackground-color: var(--danger);使用主题中的危险色
bg-infobackground-color: var(--info);使用主题中的信息色
bg-lightbackground-color: var(--light);使用主题中的亮色
bg-darkbackground-color: var(--dark);使用主题中的暗色

颜色强度 ​

支持不同强度的颜色变体：

类名生成的 CSS备注
bg-red-500background-color: #ef4444;红色，强度 500
bg-blue-300background-color: #93c5fd;蓝色，强度 300
bg-green-700background-color: #15803d;绿色，强度 700

线性渐变 ​

设置元素的线性渐变背景：

类名生成的 CSS备注
bir-#0356fa,#05abffbackground-image: linear-gradient(to right, #0356fa, #05abff);从左到右的线性渐变背景
bil-#0356fa,#05abffbackground-image: linear-gradient(to left, #0356fa, #05abff);从右到左的线性渐变背景
bit-#0356fa,#05abffbackground-image: linear-gradient(to top, #0356fa, #05abff);从下到上的线性渐变背景
bib-#0356fa,#05abffbackground-image: linear-gradient(to bottom, #0356fa, #05abff);从上到下的线性渐变背景
bibl-#0356fa,#05abffbackground-image: linear-gradient(to bottom left, #0356fa, #05abff);从右上到左下的线性渐变背景
bibr-#0356fa,#05abffbackground-image: linear-gradient(to bottom right, #0356fa, #05abff);从左上到右下的线性渐变背景
bitl-#0356fa,#05abffbackground-image: linear-gradient(to top left, #0356fa, #05abff);从右下到左上的线性渐变背景
bitr-#0356fa,#05abffbackground-image: linear-gradient(to top right, #0356fa, #05abff);从左下到右上的线性渐变背景

背景图像 ​

设置元素的背景图像：

类名生成的 CSS备注
bgi-url("image.jpg")background-image: url("image.jpg");设置背景图像
bgc-coverbackground-size: cover;背景图像覆盖整个元素
bgc-containbackground-size: contain;背景图像完全包含在元素内
bgr-no-repeatbackground-repeat: no-repeat;背景图像不重复
bgr-repeatbackground-repeat: repeat;背景图像重复
bgr-repeat-xbackground-repeat: repeat-x;背景图像水平重复
bgr-repeat-ybackground-repeat: repeat-y;背景图像垂直重复
bgp-centerbackground-position: center;背景图像居中
bgp-topbackground-position: top;背景图像顶部对齐
bgp-bottombackground-position: bottom;背景图像底部对齐
bgp-leftbackground-position: left;背景图像左侧对齐
bgp-rightbackground-position: right;背景图像右侧对齐

背景附着 ​

设置背景图像的附着方式：

类名生成的 CSS备注
bga-scrollbackground-attachment: scroll;背景图像随页面滚动
bga-fixedbackground-attachment: fixed;背景图像固定不动
bga-localbackground-attachment: local;背景图像随元素内容滚动

使用示例 ​

基本背景颜色 ​

vue
<template>
  <view class="bg-primary p-4 rounded-lg">
    主色背景
  </view>
</template>

渐变背景 ​

vue
<template>
  <view class="bir-#0356fa,#05abff p-4 rounded-lg text-white">
    蓝色渐变背景
  </view>
</template>

背景图像 ​

vue
<template>
  <view class="bgi-url("https://example.com/image.jpg") bgc-cover bgr-no-repeat h-40 flex items-center justify-center">
    <text class="text-white text-xl font-bold">背景图像</text>
  </view>
</template>

组合使用 ​

vue
<template>
  <view class="bg-primary bg-opacity-80 bgi-url("pattern.png") bgr-repeat p-4 rounded-lg">
    组合背景效果
  </view>
</template>

最佳实践 ​

  1. 主题集成：优先使用主题中定义的颜色变量，确保品牌一致性
  2. 性能优化：对于大型背景图像，考虑使用适当的压缩和格式
  3. 响应式设计：在不同屏幕尺寸上测试背景效果，确保在所有设备上都能正常显示
  4. 可访问性：确保背景颜色与文本颜色的对比度足够，以保证可读性
  5. 渐变使用：适度使用渐变效果，避免过度使用导致视觉疲劳

自定义背景 ​

你可以通过 theme.json 配置文件添加自定义背景样式：

json
{
  "backgrounds": {
    "primary-gradient": "background: linear-gradient(135deg, var(--primary), var(--secondary));",
    "card": "background: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);"
  }
}

然后在你的组件中使用这些自定义背景类：

vue
<template>
  <view class="background-primary-gradient p-4 rounded-lg text-white">
    自定义渐变背景
  </view>
</template>