Web前端(W3Cways.com) - Web前端学习之路
RGBA是一种可以设置颜色值和透明度的CSS颜色
下面是用rgba() 设置50%透明度的白色.
p {
color: rgba(255, 255, 255, 0.5);
}
RGBA是RGB色彩模型的一个扩展。这个缩写词代表红绿蓝三原色的首字母，Alpha值代表颜色的透明度/不透明度。
RGBA语法
RGBA色彩表示法的格式为：:
rgba(red, green, blue, alpha)
前三个值（红绿蓝）的范围为0到255之间的整数或者0%到100%之间的百分数。这些值描述了红绿蓝三原色在预期色彩中的量。
如果你想设置纯红色，那么把red参数设置满，即255，绿，蓝设置0即可。
background-color: rgba(255, 0, 0, 1);
结果:
也可使用百分比:
background-color: rgba(100%, 0%, 0%, 1);
结果:
第四个值, alpha, 制定了色彩的透明度/不透明度，它的范围为0.0到1.0之间
下面的例子是设置50%透明度的黄色:
color: rgba(255, 242, 0, 0.5);
结果:
50%透明度的黄色
如何把整数转换为百分数
前面提到了，使用百分数值代替整数值来表示红、绿、蓝三原色的量，最后得到的结果是相同的。0代表0%，255就表示100%。为了让百分数等值，你只需要让整数值除以255然后乘以100%就可以了。
上面的例子中，如果RGBA色彩值是rgba（255,242,0,0.5），那么
- Red: (255/255) x 100% = 100%
- Green: (242/255) x 100% = 94.9%
- Blue: (0/255) x 100% = 0%
- Alpha: 0.5
color: rgba(100%, 94.9%, 0%, 0.5);
结果:
50%透明度的黄色
如何把百分数转换为整数
其实只要把上面的倒过来即可，即把百分比数值乘以255，再乘以100%（即乘以255后去掉百分号）
来个橙色的例子:
rgba(100%, 64.7%, 0%, 1)
结果:
- Red: (100% x 255) / 100% = 255
- Green: (64.7% x 255) / 100% = 165 (四舍五入到最接近的整数)
- Blue: (0% x 255) / 100% = 0
- Alpha: 1
转化成整数后的值为:
rgba(255, 165, 0, 1)
结果:
RGB颜色模型解释
RGB颜色模型就是一种描述某个颜色里面有多少红、绿、蓝三原色的量的方法，就像把水彩颜料或油彩颜料混合起来得到某种我们想要的真实色彩一样。
想象下如果你要配出一个纯蓝色，为了实现这个，你就不能把红色和绿色放进这个颜色里。所以我们就把红、绿设置为0%，把绿设置为100%：
rgb(0%, 0%, 100%)
结果:
但如果你想要的不是蓝色而是紫红色，那该怎么办呢？我们可以通过将100%的红和100%的蓝混合起来得到紫红色：
rgb(100%, 0%, 100%)
结果:
从基础的色彩理论，我们知道了没有任何颜色就是黑色。所以为了得到黑色我们可以通过设置红、绿、蓝三原色为0%来实现：
rgb(0%, 0%, 0%)
结果:
如何确定RGB颜色的值
我们可以使用Photoshop的拾色器功能来获取特定色彩的红、绿、蓝三原色的数值，但也有免费的网上工具比如Color Slider和The RGB Color Calculator。
使用Photoshop的拾色器对话框来获取RGB值
RGBA颜色的替代做法
尽管RGBA颜色值表示法在当前很受欢迎的的浏览器上能获得很好的支持，但可以设定固体（完全不透明的）替代颜色以防万一，特别是当很容易做到的时候。比如说我们有一个div，它有一个50%透明度的海军蓝的背景色，并且上面的文字为30%透明度的白色。
对我们固体替代颜色来说，假如rgba()不被浏览器支持，我们能使用十六进制颜色表示法或任何其他CSS颜色值表示法。（下面的例子中用到了十六进制颜色表示法）
div {
background-color: #000080; /* 蓝色的16进制写法 */
color: #ffffff; /* 白色的16进制写法 */
background-color: rgba(0, 0, 128, 0.5); /* 50%透明度的蓝色 */
color: rgba(255, 255, 255, 0.3);/* 30%透明度的白色 */<
}
结果:
你好！
如果浏览器不支持RGBA的话，将会如下图所示：
你好！
浏览器支持
所有主流浏览器及IE9以上版本都支持，
