继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

颜色格式转换,rgb,rgba和opacity的区别

Just90
关注TA
已关注
手记 7
粉丝 9
获赞 271

一、颜色有几种主要的表示方式:1. color name:(red,green,blue,black,white,pink,gray,orange...); 2. hex(#ff0000,#00ff00,#0000ff,#000000,#ffffff);3. rgb:(255,255,255),(0,127,255),(0,0,0)...
二、hex和rgb之间的转化:
hex为十六进制表示法,rgb为十进制表示法,hex和rgb之间的转换即为十六进制数与十进制数之间的转换。当碰到hex为简写的三位时转换为六位,如#f00-->#ff0000,#aaa-->#aaaaaa。
问题:hex(#f00)-->rgb(?),问号里应该是什么呢?
思路(原理)我们知道十六进制的 a,b,c,d,e,f 分别对应十进制的 10,11,12,13,14,15。可简单验证下:
十进制转换十六进制
第二位上的 f 的值当为 15*16=240.

f00-->#ff0000-->#(1516+15,016+0,0*16+0)-->rgb(255,0,0);可简单验证下:

十六进制和十进制互转
问题:hex(#fe5434)-->rgb(?)
解答:#fe5434-->#(1516+14,516+4,3*16+4)-->rgb(254,84,52);不然验证下:
FastStone Capture显示结果:
fe5434
三、color name 和 hex 之间的转化,菜鸟教程里面写得很全http://www.runoob.com/tags/html-colorname.html
四、rgb,rgba和opacity的区别
对于不透明度,我们撇开 filter:Alpha(opacity=50)不谈。
rgba 的 a 表示不透明度。 {background-color: rgba(220,152,52,1)}表示不透明度为100%,就是不透明,结果和 {background-color: rgb(220,152,52)相同,和{ background-color: rgb(220,152,52); opacity: 1;}也相同,和{ background-color: #dc9834;}也相同。验证一下:
hex-rgb-rgba-opacity
四个背景相同
{background-color: rgba(220,152,52,.5)}单就背景颜色结果和{ background-color: rgb(220,152,52); opacity: .5;}相同,根据取色结果知背景颜色都为 #EECB99,但不同的是{ background-color: rgb(220,152,52); opacity: .5;}设置后,文本的字体颜色也变了。rgba设置的是背景颜色的不透明度进而改变了背景颜色的值,opacity设置的是背景颜色和内容的字体颜色的不透明度,进而改变其值。

打开App,阅读手记
11人推荐
发表评论
随时随地看视频慕课网APP