前端-基础篇-CSS-背景颜色的几种表示方法

最新推荐文章于 2024-08-17 22:30:49 发布

wifi612

最新推荐文章于 2024-08-17 22:30:49 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签：前端 CSS

本文链接：https://blog.csdn.net/wifi612/article/details/95977577

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了CSS中设置背景颜色的三种方式：1) 使用颜色英文单词，适用于基础颜色；2) 十六进制代码表示，可通过PS取色器获取；3) RGB表示法，同样可以从PS或其他色卡中得到RGB数值。并提供了相应的代码示例。

摘要由CSDN通过智能技术生成

一、背景颜色的几种表示方法

1、用颜色英文单词表示

这种一般适用于基本颜色表示（比如红黄蓝绿）

background:red

2、用（ps）取色器获取到的十六进制代码表示

1）可以利用ps软件拾取颜色获得图片中颜色的十六进制代码
在这里插入图片描述
2）将获取到的十六进制颜色代码写入背景颜色样式中

background:#bae5f5

3、用（ps）取色器获取到（或色卡）的RGB表示

第2点的方法也可以获取到RGB数值，将RGB数值写入背景颜色样式中

background:rgb(186,229,245)

二、代码示例

可复制到编辑器保存为html格式，再用浏览器打开预览

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>颜色的几种代码表达方式</title>
		<style>
			#div1{width:200px;height:200px;background:red;}
			/*用颜色英文单词表示*/
			#div2{width:200px;height:200px;background:#bae5f5;}
			/*用（ps）取色器获取到的十六进制代码表示*/
			#div3{width:200px;height:200px;background:rgb(186,229,245);}
			/*用（ps）取色器获取到（或色卡）的RGB表示*/
	    </style>
	</head>
	<body>
		<div id="div1">第一种：颜色英文单词实现</div>       <!--第一种：颜色英文单词实现-->
		&nbsp;         <!--换行符-->
		<div id="div2">第二种:取色器十六进制代码实现</div>
		&nbsp;
		<div id="div3">第三种：RGB实现</div>
	</body>
</html>