为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html/CSS

一、颜色有几种主要的表示方式: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设置的是背景颜色和内容的字体颜色的不透明度,进而改变其值。

点击查看更多内容
11人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
9
获赞与收藏
271

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消