一、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模式