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 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 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
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
layui导航栏实现代码
2017/05/19 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
React diff算法的实现示例
2018/04/20 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
详解Python做一个名片管理系统
2019/03/14 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
逃课上网检讨书
2014/02/20 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
预备党员转正考核材料
2014/06/03 职场文书
另类冲刺标语
2014/06/24 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书