欢迎来到山村网

CSS中对RGB颜色的使用详解

2019-03-29 02:57:12浏览:502 来源:山村网   
核心摘要:  RGB颜色模型解释  RGB颜色模型就是一种描述某个颜色里面有多少红、绿、蓝三原色的量的方法,就像把水彩颜料或油彩颜料混合

  RGB颜色模型解释

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

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

  CSS Code复制内容到剪贴板

  rgb(0%, 0%, 100%)

  结果:

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

  CSS Code复制内容到剪贴板

  rgb(100%, 0%, 100%)

  结果:

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

  CSS Code复制内容到剪贴板

  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%)。

  实例

  CSS Code复制内容到剪贴板

  p

  {

  background-color:rgb(255,0,0);

  }

(责任编辑:豆豆)
下一篇:

网易应用下载站WEB端GUI设计的小分享

上一篇:

30个奔放的自由设计师个人网站欣赏

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们 xfptx@outlook.com