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

CSS中对RGB颜色的使用详解

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

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

RGB颜色模型解释

RGB颜色模型就是一种描述某个颜色里面有多少红、绿、蓝三原色的量的方法,就像把水彩颜料或油彩颜料混合起来得到某种我们想要的真实色彩一样。

想象下如果你要配出一个纯蓝色,为了实现这个,你就不能把红色和绿色放进这个颜色里。所以我们就把红、绿设置为0%,把绿设置为100%:
 

  1. rgb(0%, 0%, 100%)  

结果:

但如果你想要的不是蓝色而是紫红色,那该怎么办呢?我们可以通过将100%的红和100%的蓝混合起来得到紫红色:
 

  1. rgb(100%, 0%, 100%)  

结果:

从基础的色彩理论,我们知道了没有任何颜色就是黑色。所以为了得到黑色我们可以通过设置红、绿、蓝三原色为0%来实现:
 

  1. rgb(0%, 0%, 0%)  

结果:
如何确定RGB颜色的值

我们可以使用Photoshop的拾色器功能来获取特定色彩的红、绿、蓝三原色的数值,但也有免费的网上工具比如Color Slider和The RGB Color Calculator。

w3school上对RGB颜色的解释:

RGB 颜色

所有浏览器都支持 RGB 颜色值。

RGB 颜色值是这样规定的:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。

举例说,rgb(0,0,255) 值显示为蓝色,这是因为 blue 参数被设置为最高值(255),而其他被设置为 0。

同样地,下面的值定义了相同的颜色:rgb(0,0,255) 和 rgb(0%,0%,100%)。
实例

  1. p   
  2. {   
  3. background-color:rgb(255,0,0);   
  4. }  

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

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06使用z-index:-1 让一个层在所有层的下面当背景
  • 2017-08-06DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
  • 2017-08-06css3动画效果小结(推荐)
  • 2017-08-06css中visiblity和display异同详解
  • 2017-08-06避免不必要的浏览器兼容性问题的5个技巧
  • 2017-08-06css important终级讲解
  • 2017-08-06纯CSS3实现扇形动画菜单(简化版)实例源码
  • 2017-08-06使用CSS居中浮动元素的方法
  • 2017-08-06CSS 自动定位 的应用
  • 2017-08-06CSS3中的Opacity多浏览器透明度兼容性问题

文章分类

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

最近更新的内容

    • css固定宽度并且让最后一行文字换行
    • 多种方法使背景图片占据整个屏幕
    • CSS3盒子模型详解
    • css3+jq创作含苞待放的荷花
    • IE9的css hack使用示例
    • 利用纯CSS实现头像旋转和发光的效果
    • 使用div+CSS将页脚始终控制在页面最下方的方法
    • css display inline block 兼容性问题写法
    • CSS设计网页小技巧 100%的高度
    • CSS实现圆环旋转加载动画

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

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