【CSS】CSS 背景设置 ① ( 背景颜色 | 背景图片 | 背景平铺 )

韩曙亮

发布于 2023-03-30 11:21:37

6.2K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

一、背景颜色

1、语法说明

CSS 的背景颜色样式语法 : 默认的背景颜色是 transparent 透明 ;

background-color:颜色值;

background-color 属性可以定义文本颜色 , 其颜色值有三种表示方式 :

预定义颜色 : 直接使用颜色的英文名称 , blue , red , green ;
十六进制颜色 : #FF0000 红色 , #00FF00 绿色 , #0000FF 蓝色 ; 该写法最常用 ;
RGB 代码颜色 :
- 数值形式 : rgb(255, 0, 0) , rgb(0, 255, 0) , rgb(0, 0, 255)
- 百分比形式 : rgb(100%, 0%, 0%) , rgb(0%, 100%, 0%) , rgb(0%, 0%, 100%)

2、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>背景颜色</title>
	<base target="_blank"/>
    <style>
		/* 设置背景颜色 */
		.background {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
    </style>
</head>
<body>
	<div class="background">
		背景颜色测试
	</div>
</body>
</html>

展示效果 :

二、背景图片

1、语法说明

CSS 的背景图片样式语法 : 背景图片的链接需要写在 url() 中 , 并且 url() 中的链接可以没有双引号 ;

background-image: url(相对路径);

在 url() 中设置相对链接
url() 中的链接没有双引号

2、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>背景图片</title>
	<base target="_blank"/>
    <style>
		/* 设置背景图片 */
		.background {
			width: 200px;
			height: 200px;
			color: white;
			
			/* 背景图片设置 
				1. 在 url() 中设置相对链接
				2. url() 中的链接没有双引号
			*/
			background-image: url(images/image.jpg);
		}
    </style>
</head>
<body>
	<div class="background">
		背景图片测试
	</div>
</body>
</html>