• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS3的RGBA中关于整数和百分比值的转换

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS3,RGBA等相关知识,佚名 希望在学习及工作中可以帮助到您

如何把整数转换为百分数

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

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

  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);  

结果:
201584175100801.jpg (799×224)

如何把百分数转换为整数

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

来个橙色的例子:
 

  1. rgba(100%, 64.7%, 0%, 1)  

结果:

  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  

转化成整数后的值为:
 

  1. rgba(255, 165, 0, 1)  


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

  1. div {     
  2.    background: rgb(200, 54, 54); /* The Fallback */  
  3.    background: rgba(200, 54, 54, 0.5);   
  4. }  

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

您可能想查找下面的文章:

  • 使用CSS3制作一个简单的进度条(demo)
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果
  • CSS3实现自定义Checkbox特效实例代码
  • 总结30个CSS3选择器
  • CSS3模拟动画下拉菜单效果
  • CSS3动画:5种预载动画效果实例
  • CSS3 仿微信聊天小气泡实例代码

相关文章

  • 2017-08-06css之六个为什么为您解答 性能与习惯的结合
  • 2017-08-06body背景图片拉伸另类实现
  • 2017-08-06纯CSS3制作的鼠标悬停时边框旋转
  • 2017-08-06css实现点击滚动翻页的效果(无js)
  • 2017-08-06CSS设置div对象盒子里部分文字加粗的实例介绍
  • 2017-08-06CSS伪类
  • 2017-08-06图解CSS中position属性的定位用法
  • 2017-08-06CSS表格样式:圆角,隔行,变色的具体实现
  • 2017-08-06权重和层叠规则决定了CSS样式优先级
  • 2017-08-06跨浏览器开发经验总结(二) CSS

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html+css实现登录界面附效果图
    • 兼容IE6的图片圆角边框CSS
    • IE中对于stylesheet、样式规则的个数限制
    • CSS 文字加阴影变3D效果演示
    • css控制水平衡线hr标签样式去掉阴影效果
    • CSS hack大全之特殊符号的应用解决浏览器兼容性问题
    • CSS的执行顺序和优先级问题示例探讨
    • css3设置box-pack和box-align让div里面的元素垂直居中
    • DIV设置 float以后使下一个DIV另起一行的方法
    • CSS 盒模型、块状元素与内联元素、CSS选择器

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有