CSS 的 rgb() 和 rgba() 函数（设置颜色的方式之一）

一、CSS中设置颜色的四种方式：

值	描述
color_name	规定颜色值为颜色名称的颜色（如：yellow黄色）
hex_number	规定颜色值为16进制颜色值（比如：#ff0000）
rgb_number	规定颜色值为 rgb 代码的颜色（比如：255,0,0）
inherit	规定应该从父元素继承颜色

上面是网上提供的设置颜色的表格：（实际上还可以细分一下）

1、通过颜色名称赋值：red、blue、yellow、green、pink…（这种比较简单就不多啰嗦了）CSS 颜色名称对照表

color : red; //红

2、通过6位16进制赋值：每一位都是0-f之间的值。（十六进制：0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f 其中 a ~ f 表示 10 ~ 15 这些称作十六进制数字）CSS 颜色十六进制值

color : #ff0000; //红
color : #00ff00;    //绿
color : #0000ff;    //蓝
color : #ffff00;    //黄
color : #000000;    //黑
color : #ffffff;    //白

3、通过3位16进制赋值：（相对第二种有局限性）

说白了就是上面第二种方式的简写，如果12、34、56位都相同就可以 合并 起来，即：color : #00ff00;可以写成color : #0f0;

color : #0f0;    //绿

4、通过三位10进制赋值：（此处也就涉及到了rgb()函数，下面会详细的介绍）

color : rgb(255,0,0);        // 红
color : rgb(0,255,0);       // 绿
color : rgb(0,0,255);       // 蓝
color : rgb(0,0,0);         // 黑
color : rgb(255,255,255);   // 白

5、通过四位10进制赋值：（设置半透明的方式，下面会详细的介绍）：

color : rgba(255,0,0,0.5);       //红(半透明)
color : rgba(0,255,0,0.5);      //绿(半透明)
color : rgba(0,0,255,0.5);      //蓝(半透明)
color : rgba(0,0,0,0.5);        //黑(半透明)

二、rgb()函数：

1、rgb()函数：语法：RGB (red,green,blue)

参数	描述
red	三原色中的红色，必需，介于0 - 255之间（且包括）的数字
green	三原色中的绿色，必需，介于0-255之间（且包括）的数字
blue	三原色中的蓝色，必需，介于0-255之间（且包括）的数字

光学三原色：（为了我们更好的理解rgb()函数的参数）

从物理光学实验中得出：红Red、绿Green、蓝Blue三种光色以不同比例的混合几乎可以得到自然界所有的颜色；
一种颜色的数值一般用这种颜色的RGB值来表示；
RGB各有 256 级亮度，用数字0、1、2…255表示；
按照计算，256级的RGB色彩总共能组合出约1678万种色彩，即256 * 256 *256 = 16777216，通常也被称为1600万色或千万色，也称为24位色（2的24次方）；
对于单独的R、G 或 B而言，当数值为 0 时，代表这个颜色不发光，255 时代表该颜色最亮，（这也就充分的证明了为什么三个值都为 0 的时候为黑色了）

rgb() 函数的三个参数分别代表的就是光学三原色中的红Red、绿Green、蓝Blue（色彩三原色是红绿青，但是CSS中使用的就是光学三原色红绿蓝），返回表示 RGB 颜色值的数字，主要是通过红绿蓝三原色的值混合来确定一个我们想要的颜色，每个参数都是必需的，值为 0-255 之间包括 0 和 255。（我们只知道这种赋值方式就行了，平时开发这些颜色都是美工给我们选好的）

简单的看一下效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">#p1 {background-color:rgb(255,0,0);} /* 红 */#p2 {background-color:rgb(0,255,0);} /* 绿 */#p3 {background-color:rgb(0,0,255);} /* 蓝 */#p4 {background-color:rgb(0,0,0);color: white} /* 黑 */#p5 {background-color:rgb(255,255,255);border: 1px solid;} /* 白 */
</style>
</head>
<body><p id="p1">红</p><p id="p2">绿</p><p id="p3">蓝</p><p id="p4">黑</p><p id="p5">白</p>
</body>
</html>

为了方便看：我给白色背景设置一个边框，为黑色背景设置了白色字体。

提示：请使用合理的背景颜色和文本颜色搭配，这样可以提高文本的可读性。

三、rgba()函数：

1、rgba()函数：语法：rgba(red, green, blue, alpha)

参数值	描述
red	定义红色值，取值范围 0 ~ 255，也可以使用百分比 0% ~ 100%
green	定义绿色值，取值范围 0 ~ 255，也可以使用百分比 0% ~ 100%
blue	定义蓝色值，取值范围 0 ~ 255，也可以使用百分比 0% ~ 100%
alpha-透明度	定义透明度 0 （完全透明） ~ 1（完全不透明）

在 css3 中新增了一个 rgba 属性，所谓rgba属性，就是在R（red红）G（green绿）B（blue蓝）三原色的基础上加 alpha（透明度）转换而来的，设置为 1 完全不透明也就是和没设置一样了（哈哈），设置为 0 就是全透明（如果背景是白色那就看不到了），还有就是设置透明度是不会被继承的，所以不用担心是否被继承的问题。

color : rgba(255,0,0,0.5);       //红(半透明)

2、rgba()函数中关于整数和百分比值的转换：（上面提到 rgba() 函数可以使用百分比的形式来表示）

先说说如何把整数转换为百分数：使用百分数值代替整数值来表示红、绿、蓝三原色的量，最后得到的结果是相同的。0 代表 0%，255 代表 100%，为了让百分数等值，你需要让整数值除以 255 然后乘以 100% 就可以了。

如果 RGBA 色彩值是rgba（255,242,0,0.5），那么：

Red: (255/255) x 100% = 100%
Green: (242/255) x 100% = 94.9%
Blue: (0/255) x 100% = 0%
Alpha: 0.5
color: rgba(100%, 94.9%, 0%, 0.5);

如何把百分数转换为整数：即：把百分比数值乘以255，再除以100%（即乘以255后去掉百分号）

如果 RGBA 色彩值是 rgba(100%,64.7%,0%,1)，那么：

Red: (100% x 255) / 100% = 255
Green: (64.7% x 255) / 100% = 165 (四舍五入到最接近的整数)
Blue: (0% x 255) / 100% = 0
Alpha: 1
//转化成整数后的值为:
rgba(255, 165, 0, 1);

3、其实在我使用的过程中 rgb()函数和 rgba()函数是通用的：

即：我使用rgb(255,0,0,0.5);也是可以实现半透明的红色的。

color : rgb(255,0,0,0.5);        //红(半透明)

也可以使用 rgb() 函数设置颜色（即：第四个参数不用设置）

color : rgba(255,0,0);       //红（也可以设置成功）

四、几种赋值方式相互转换：

首先 F12 打开开发者模式，然后找到我们设置的属性：（这是我常用到的方法）

然后点击一下那个属性的值：red前面那个红色小框框，然后弹出了下面的弹出框。

然后再点击我标记的那个按钮就可以查看对应的十六进制和十进制的赋值方式中的值了。

显示百分比的值：

显示十六进制值：

也可以点击上面的颜色进行调整，点击中间的圆圈进行复制，这个就不多说了，大家都知道，就啰嗦这么多吧，喜欢的话别忘了点了赞，谢谢！感兴趣可以查看一下另一种设置颜色的模式：HSL模式

CSS 的 rgb() 和 rgba() 函数（设置颜色的方式之一）相关推荐

用API函数设置颜色
1.在设置头文件后将要用到的颜色也定义一下例如设置红色:#define SetRed (FOREGROUND_RED|FOREGROUND_INTENSITY) 2.先在设置全局变量时用 Get ...
python rgba_python-从matplotlib中的RGBA函数创建颜色条
要创建颜色图,您必须指定红色/绿色/蓝色分量在线性比例上的变化方式.看来您已经有了一个函数f,可以为您设置r / g / b组件.最困难的部分是第四个通道,即alpha通道.给定您的f指定的RGB颜色 ...
plot函数设置颜色、字体
官网超棒 1.设置正常中文字体 mpl.rcParams['font.sans-serif'] = ['KaiTi'] mpl.rcParams['font.serif'] = ['KaiTi'] m ...
css透明度为0.2是什么颜色,CSS3颜色不透明度的设置方法【web前端】
在CSS3之前,我们设置颜色的方式包含十六进制颜色(如#F00).rgb模式颜色.或指定颜色的英文名称(如red),但这些方法无法改变颜色的不透明度.在CSS3中新增了两种设置颜色不透明度的方法,一种 ...
CSS 的 linear-gradient() 线性渐变函数（带例子）
一.CSS中的 linear-gradient() 函数: 1.定义与用法:(定义部分取自菜鸟教程) linear-gradient() 函数用于创建一个线性渐变的" 图像 ". ...
html怎么设置颜色透明,CSS3如何设置颜色不透明度？
在CSS3之前,我们设置颜色的方式包含十六进制颜色(如#F00).rgb模式颜色.或指定颜色的英文名称(如red),但这些方法无法改变颜色的不透明度.在CSS3中新增了两种设置颜色不透明度的方法,一种 ...
JavaScript如何给Table行设置颜色？
1.首先,在CSS文件中定义要设置的颜色.比如, .resetrowscolor { background-color: red; } 2.在要显示的页面中引入该CSS文件,比如 <li ...
rgb和rgba的区别关系
rgb和rgba都表示颜色. rgb: 由红绿蓝三种颜色组成,由着三种颜色组合表示不同颜色,取值分别为0-255. rgba: 在rbg的基础上加了alpha透明度,取值在0-1之间.
前端如何设置背景颜色的透明度 css中的 rgba() 函数详解：background-color: rgba(255,192,203,0.3)
目录前言 rgba() 函数详解再分享一个小技巧哈哈哈前言今天在开发移动端的时候感觉没背景颜色有点丑,再加上自己做的是蛋糕app,觉得暖色应该会很好看,于是就用了这行代码 backgroun ...

CSS 的 rgb() 和 rgba() 函数（设置颜色的方式之一）

CSS 的 rgb() 和 rgba() 函数（设置颜色的方式之一）相关推荐

最新文章

热门文章