学习记录 --【零基础CSS学习】16.背景属性

钟情于山海

已于 2022-07-06 11:07:31 修改

阅读量398

点赞数

文章标签： css 前端 html

于 2022-07-06 11:06:41 首次发布

本文链接：https://blog.csdn.net/m0_37612107/article/details/125635343

版权

一、背景颜色

1. background-color：合法的颜色值；

（1）合法的颜色值：颜色名，16进制颜色值，rgb颜色值，rgba颜色值

2. 如果没有设置背景颜色，那么背景就是透明。默认值：transparent

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景颜色</title>
	<style type="text/css">
		div{
			width: 220px;
			height: 60px;
			line-height: 60px;
			background-color: red;
			/*background-color: transparent;*/
			position: relative;
		}
		p{
			width: 100px;
			height: 30px;
			/*background-color: blue;*/
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0,0,255,0.5);
		}
	</style>
</head>
<body>
	<div>
		我想打游戏
		<p></p>
	</div>
</body>
</html>

二、背景图片

1. background-image：url(图片路径);

（1）图片路径：相对路径绝对路径

（2）默认值，none：表示没有背景图片

（3）背景颜色和背景图片可以同时设置

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景图片</title>
	<style type="text/css">
		div{
			width: 400px;
			height: 200px;
			line-height: 200px;
			background-color: red;
			background-image: url(../img/g4.jpg); /*填写自己的图片路径、名称*/
		}
	</style>
</head>
<body>
	<div>教练，我想打篮球</div>
</body>
</html>