前端笔记09——CSS的颜色表示方式_css中颜色cgb-优快云博客

本文详细介绍了CSS中颜色表示的多种方式，包括RGB、十六进制、颜色名称及RGBA模式，通过实例展示了如何在HTML中应用这些颜色表示方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS的颜色表示方式

1.RGB模式

R代表的是红色，G代表的是绿色，B代表的是蓝色，就是红绿蓝三原色可以组成N多颜色。

RGB取值范围

RGB的取值范围在0-255之间。

RGB模式实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				/*设置宽度*/
				width: 100px;
				/*设置高度*/
				height: 100px;
				/*设置背景颜色，只要改变rgb里面的值就可以看到不同的效果，注意取值范围在0-255之间*/
				background-color: rgb(255,0,0);
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

2.直接写颜色名称（针对常见颜色）

效果与上面的方法是一致的，针对常见颜色，特殊颜色无法准确表示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				/*设置宽度*/
				width: 100px;
				/*设置高度*/
				height: 100px;
				/*设置背景颜色*/
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

3.十六进制

效果与上面两种方法一致，只是代码里面表示形式的不同。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				/*设置宽度*/
				width: 100px;
				/*设置高度*/
				height: 100px;
				/*设置背景颜色*/
				background-color: #FF0000
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

RGBA模式

R代表红色，G代表绿色，B代表蓝色，A代表透明度，与第一个RGB模式多了A也就透明度。

代码实例

效果与上面三种方法一致，只是代码里面表示形式的不同。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				/*设置宽度*/
				width: 100px;
				/*设置高度*/
				height: 100px;
				/*设置背景颜色，注意rgb取值是0-255，a的取值是0（完全透明）-1（表示不透明）*/
				background-color: rgba(255,0,0,1);
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>