颜色与背景

颜色 color 作用于字体上，背景 background 则可作用于任意元素（包含文本），Kraken 支持的颜色与背景相关属性请参考对应的开发文档。

对于颜色同时支持颜色关键字，rgba，16 进制等多种格式，具体请参考对应的开发文档。

示例：

  1. <div>
  2.   {/* 关键字字体颜色 */}
  3.   <div style={{ color: 'blue', fontSize: '16px' }}>关键字颜色</div>
  5.   {/* 16 进制字体颜色 */}
  6.   <div style={{ color: '#F40', fontSize: '20px' }}>16 进制颜色</div>
  8.   {/* rgba 字体颜色 */}
  9.   <div style={{ color: 'rgba(155, 85, 150, 0.9)', fontSize: '24px' }}>
  10.     rgba 颜色
  11.   </div>
  13.   {/* 背景颜色 */}
  14.   <div
  15.     style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}
  16.   />
  18.   {/* 背景图片 */}
  19.   <div
  20.     style={{
  21.       width: '150px',
  22.       height: '150px',
  23.       backgroundImage:
  24.         'url(https://kraken.oss-cn-hangzhou.aliyuncs.com/images/60x60-green.png)',
  25.     }}
  26.   />
  27. </div>

渲染效果：

颜色与背景 - 图1
请选择以下任意一种方式预览：
1. 安装 Kraken CLI，然后复制以下命令到命令行中运行：
2. 在 Android 手机上先下载 Play Kraken App，然后打开 App 扫描下方二维码预览：
颜色与背景 - 图2