颜色与背景

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

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

示例：

  1. <div>  {/* 关键字字体颜色 */}  <div style={{ color: 'blue', fontSize: '16px' }}>关键字颜色</div>
  2.   {/* 16 进制字体颜色 */}  <div style={{ color: '#F40', fontSize: '20px' }}>16 进制颜色</div>
  3.   {/* rgba 字体颜色 */}  <div style={{ color: 'rgba(155, 85, 150, 0.9)', fontSize: '24px' }}>    rgba 颜色  </div>
  4.   {/* 背景颜色 */}  <div    style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}  />
  5.   {/* 背景图片 */}  <div    style={{      width: '150px',      height: '150px',      backgroundImage:        'url(https://kraken.oss-cn-hangzhou.aliyuncs.com/images/60x60-green.png)',    }}  /></div>

渲染效果：

颜色与背景 - 图1

请选择以下任意一种方式预览：

1. 安装 Kraken CLI，然后复制以下命令到命令行中运行：

kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-color.js

2. 在 Android 手机上先下载 Kraken Playground App，然后打开 App 扫描下方二维码预览：

颜色与背景 - 图2