一、设置背景颜色
- 设置背景颜色可用参数:
- **可用参数一: background **
- **可用参数二:background-color **
- 注意参数一和参数二 :任意选择一个使用即可
- 例如:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>背景颜色设置</title>
<style type="text/css">
div {
height: 600px;
/* 1.设置背景颜色:background 或者 background-color */
background:red;
background-color:yellowgreen
}
</style>
</head>
<body>
<div>背景设置的使用</div>
</body>
</html>
二、设置背景图片
- 设置背景图片可用参数:
- 可用参数一: background-image
- 例如:
<!-- <!DOCTYPE html -->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 600px;
/* 2.设置图像为背景图像:background-image */
background-image: url(./600.jpg);
}
</style>
</head>
<body>
<div>设置背景图片</div>
</body>
</html>
三、设置背景平铺
- 设置背景平铺参数:
- **可用参数一:background-repeat **
-
属性值:
:::info -
1、repeat:导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样
-
2、repeat-x: 图像只在水平上重复
-
3、repeat-y :图像在垂直方向上重复
-
4、no-repeat :不允许图像在任何方向上平铺
::: -
例如:
<!-- <!DOCTYPE html -->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 600px;
background-image: url(./600.jpg);
/* 3.设置背景平铺:background-repeat*/
background-repeat:repeat ;
}
</style>
</head>
<body>
<div>设置背景平铺</div>
</body>
</html>
四、设置背景大小
- 设置背景大小可用参数:
- 可用参数一: background-size
-
属性值:
:::info -
1、通过像素指定
-
background-size: 100px 20px
-
2、通过百分比指定
-
background-size: 10% 20%
-
3、原始图片大小
-
background-size: auto
-
4、背景填满容器
-
background-size: cover
::: -
例如:
<!-- <!DOCTYPE html -->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 600px;
background-image: url(./600.jpg);
background-repeat:no-repeat ;
/* 4.设置背景大小:background-size*/
background-size: 600px 300px;
}
</style>
</head>
<body>
<div>设置背景大小</div>
</body>
</html>
五、设置背景的显示位置
- 设置背景大小可用参数:
- 可用参数一: background-position
-
属性值(垂直方向上下)水平方向(左右)):
:::info -
1、顶部居中
-
background-position: top center
-
2、垂直水平居中
-
background-position: center center
-
3、底部居中
-
background-position: botton center
-
4、顶部左边
-
background-position: top left
-
5、顶部右边
-
background-position: top right
::: -
例如:
<!-- <!DOCTYPE html -->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 600px;
background-image: url(./600.jpg);
background-repeat:no-repeat ;
background-size: 600px 300px;
/* 5.设置背景的显示位置 background-position: top center*/
background-position: center center;
}
</style>
</head>
<body>
<div>设置背景的显示位置</div>
</body>
</html>