| CSS 的 rgb() 和 rgba() 函数（设置颜色的方式之一） | 您所在的位置：网站首页 › 使用css设置背景颜色 › CSS 的 rgb() 和 rgba() 函数（设置颜色的方式之一） |
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。（我们只知道这种赋值方式就行了，平时开发这些颜色都是美工给我们选好的） 简单的看一下效果： Insert title here #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;} /* 白 */ 红 绿 蓝 黑 白为了方便看：我给白色背景设置一个边框，为黑色背景设置了白色字体。 三、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模式【本文地址】