CSS3的RGBA中关于整数和百分比值的转换


Posted in HTML / CSS onAugust 04, 2015

如何把整数转换为百分数

前面提到了,使用百分数值代替整数值来表示红、绿、蓝三原色的量,最后得到的结果是相同的。0代表0%,255就表示100%。为了让百分数等值,你只需要让整数值除以255然后乘以100%就可以了。

上面的例子中,如果RGBA色彩值是rgba(255,242,0,0.5),那么

CSS Code复制内容到剪贴板
  1.     Red: (255/255) x 100% = 100%   
  2.     Green: (242/255) x 100% = 94.9%   
  3.     Blue: (0/255) x 100% = 0%   
  4.     Alpha: 0.5   
  5.   
  6. color: rgba(100%, 94.9%, 0%, 0.5);  

结果:
CSS3的RGBA中关于整数和百分比值的转换

如何把百分数转换为整数

其实只要把上面的倒过来即可,即把百分比数值乘以255,再乘以100%(即乘以255后去掉百分号)

来个橙色的例子:
 

CSS Code复制内容到剪贴板
  1. rgba(100%, 64.7%, 0%, 1)  

结果:

CSS Code复制内容到剪贴板
  1. Red: (100% x 255) / 100% = 255   
  2. Green: (64.7% x 255) / 100% = 165 (四舍五入到最接近的整数)   
  3. Blue: (0% x 255) / 100% = 0   
  4. Alpha: 1  

转化成整数后的值为:
 

CSS Code复制内容到剪贴板
  1. rgba(255, 165, 0, 1)  

浏览器支持
RGBa颜色现在在Webkit 和Gecko 核心的浏览器被支持,IE各个版本的浏览器和Opera还都不支持。就像Chris在他关于RGBa的精彩的文章里 提到的,你可以使用一个标准的RGB颜色为那些不支持的浏览器指定一个向下兼容的属性。

CSS Code复制内容到剪贴板
  1. div {     
  2.    backgroundrgb(200, 54, 54); /* The Fallback */  
  3.    background: rgba(200, 54, 54, 0.5);   
  4. }  

另一个渐进增强或适度降级的例子。

HTML / CSS 相关文章推荐
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 #HTML / CSS
详解CSS中iconfont的使用
Aug 04 #HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 #HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 #HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 #HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 #HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 #HTML / CSS
You might like
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
js 表格隔行颜色
2009/12/02 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python写的一个文本编辑器
2014/01/23 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
Flask处理Web表单的实现方法
2021/01/31 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
酒店总经理岗位职责范本
2014/08/08 职场文书
励志演讲稿600字
2014/08/21 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
技术入股合作协议书
2014/10/07 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
学生逃课检讨书
2015/02/17 职场文书
新生开学寄语大全
2015/05/28 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书