CSS中对RGB颜色的使用详解
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
RGB颜色模型解释
RGB颜色模型就是一种描述某个颜色里面有多少红、绿、蓝三原色的量的方法,就像把水彩颜料或油彩颜料混合起来得到某种我们想要的真实色彩一样。
想象下如果你要配出一个纯蓝色,为了实现这个,你就不能把红色和绿色放进这个颜色里。所以我们就把红、绿设置为0%,把绿设置为100%:
- rgb(0%, 0%, 100%)
结果:
但如果你想要的不是蓝色而是紫红色,那该怎么办呢?我们可以通过将100%的红和100%的蓝混合起来得到紫红色:
- rgb(100%, 0%, 100%)
结果:
从基础的色彩理论,我们知道了没有任何颜色就是黑色。所以为了得到黑色我们可以通过设置红、绿、蓝三原色为0%来实现:
- 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%)。
实例
- p
- {
- background-color:rgb(255,0,0);
- }
相关文章
- CSS3中在rgb颜色的基础上又有了透明度的设置功能成为rgba属性,除此之外下面还会讲到CSS3新增的hsl及hsla颜色的用法,下面就来看一下CSS3中各种颜色属性的使用教程2016-05-17
- 这篇文章主要介绍了CSS实现大小相同、颜色深浅不一的粒子旋转加载动画的相关代码,运用CSS3的border-radius圆角属性、box-shadow阴影属性等属性制作出来的,感兴趣的小伙伴2016-04-25
- 这篇文章主要介绍了CSS3中currentColor关键字的妙用,合理地使用currentColor往往会让CSS代码更加简洁,同时也能与SVG图标很好地结合使用,需要的朋友可以参考下2016-02-27
- 这篇文章主要介绍了使用CSS3的::selection改变选中文本颜色的方法,也就是说可以将默认的蓝色底色改为其他颜色,really cool,需要的朋友可以参考下2015-09-29
- 这篇文章主要为大家介绍了css实现兼容火狐、IE的LI奇偶行颜色交替方法,通过css属性控制设置LI各行变色效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-28
- 这篇文章主要介绍了CSS3中颜色线性渐变实战,示例中展示了代码设置不同渐变方向的效果,需要的朋友可以参考下2015-07-18
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
使用CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量2014-08-19- 这是一款很漂亮的CSS3动画进度条,可以用它来显示每一项数据的所占的比例,效果很不错2014-06-17
- 这是一款视觉效果超炫的采用CSS3实现的3D立方体动画,与以往的立方体动画效果不同的是,这款CSS3立方体动画的几个表面的背景颜色都有渐变的动画效果,并且会伴随着立方体的2014-06-17
- 一款相对简易的纯CSS3 3D按钮,可以自己配置背景颜色2014-06-11
最新评论