返回 导航

React / React Native

hangge.com

React Native - 支持的各种颜色格式介绍(单词、RGB、RGBA、HSL、HSLA)

作者:hangge | 2017-08-15 08:10
在进行 React Native 开发时,颜色的代码有多种格式。我们除了可以使用 whitered 这样简单的颜色单词,还可以使用 RGBARGBHSLHSLA 格式或者数值来描述颜色。下面分别对它们做个介绍。

1,使用英文颜色单词

比如下面将背景色设为灰色。
backgroundColor: 'gray',

2,使用 RGBA 格式的颜色

下面是一个 RGBA 色值的描述,最后一个值得取值范围是 0~1,表示颜色的透明度。
backgroundColor: 'rgba(245,252,255,0.5)',

3,使用 RGB 格式的颜色

(1)RGB Alpha 值为 1RGBA 值(完全不透明)
(2)下面两个都是 RGB 格式的颜色,前者是十六进制表示,后者是十进制表示。
backgroundColor: '#F5FcFF',
backgroundColor: 'rgb(245,252,255)',

4,使用 HSL 或 HSLA 格式的颜色

HSL HSLA 格式的颜色描述分别是 hsl(h,s,l) hsla(h,s,l,a)
backgroundColor: 'hsl(360,100%,100%)',
backgroundColor: 'hsla(360,100%,100%,1.0)',
评论

全部评论(0)

回到顶部