通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
背景颜色
background-color：rgb值或颜色单词；
默认背景颜色值为transparent（透明）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
}
/* 背景颜色 */
.bg-color {
background-color: transparent;
}
.bg-color-trans {
text-align: center;
background-color: pink;
width: 100px;
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="bg-color">背景颜色
<div class="bg-color-trans">透明背景</div>
</div>
</body>
</html>效果：
背景图片
Background-image：图片路径URL；
默认背景图片值为none。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
}
.bg-image {
background-image: url(../images/meitizhub.jpg);
}
</style>
</head>
<body>
<div class="bg-image">背景图片</div>
</body>
</html>效果：
背景平铺
background-repeat：repeat | no-repeat | repeat-x | repeat-ybackground-repeat：repeat；
默认情况下背景图片状态为平铺，指的是图片会从左向右且从上到下整个铺满盒子。
background-repeat：no-repeat；
关闭默认平铺状态，只在盒子左上角显示一个完整的背景图片。
background-repeat：repeat-x；
沿着x轴方向在盒子内最顶部横向平铺背景图片。
background-repeat：repeat-y；
沿着y轴方向在盒子内最左侧纵向平铺背景图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
}
.bg-repeat {
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="bg-image">背景平铺默认值</div>
<div class="bg-image bg-repeat">背景不平铺</div>
<div class="bg-image bg-repeatx">x轴方向平铺背景图片</div>
<div class="bg-image bg-repeaty">y轴方向平铺背景图片</div>
</body>
</html>效果：
背景图片位置
background-position：x y；x轴和y轴的值可以是方位名词或者精确数值都可。
方位名词：top、bottom、center、left、right。
当属性值使用方位名词时如果只写一个值，则第二个值默认为居中状态。
当属性值使用精确数值时如果只写一个值，则默认是x轴方向的值，y轴方向默认垂直居中。
如果参数是方位词和精确单位混合使用时，默认第一个值是x值，第二个是y值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
}
.bg-position {
background-repeat: no-repeat;
background-position: center top;
}
.bg-position2 {
background-repeat: no-repeat;
background-position: right;
}
.bg-position3 {
background-repeat: no-repeat;
background-position: 20px 50px;
}
.bg-position4 {
background-repeat: no-repeat;
background-position: 20px ;
}
.bg-position5 {
background-repeat: no-repeat;
background-position: 80px bottom ;
}
</style>
</head>
<body>
<div class="bg-image bg-position">背景图片存放位置1</div>
<div class="bg-image bg-position2">背景图片存放位置,设置一个值</div>
<div class="bg-image bg-position3">背景图片存放位置精确单位值</div>
<div class="bg-image bg-position4">背景图片存放位置精确单位值</div>
<div class="bg-image bg-position5">背景图片存放位置混合使用</div>
</body>
</html>效果：
背景图像固定
background-attachment：scroll | fixed；背景图像在页面的某一处固定不动或者随页面的其余部分滚动。可以制作视差滚动效果。
background-attachment：scroll ；
默认值，背景图像固定在页面上，随着滚动条滚动而移动。
background-attachment：fixed；
背景图像固定在某一区域，滚动条滑动时位置不变。
body {
background-image: url(../images/43619545307190.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}背景属性复合写法
background：背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置；
没有特定书写顺序，按需使用属性。
背景颜色半透明
实现背景颜色半透明效果。
background：rgb（0,0,0, 0.3）；最后一个参数是alpha透明度，取值范围在0~1之间。
总结：
属性 | 定义 | 值 |
Background-color | 背景颜色 | Rgb值 | 十六进制 | 颜色英文单词 |
Background-image | 背景图片 | Url（图片路径） |
Background-repeat | 背景平铺 | Repeat | no-repeat |repeat-x |repeat-y |
Background-position | 背景固定 | x轴和y轴。方向名词或者精确数值 |
Background-attachment | 背景附着 | Scroll（固定在页面上）| fixed（与滚动条固定） |
背景复合写法 | 代码简洁 | 背景颜色、图片地址、平铺、 滚动、位置。 |
背景颜色半透明 | 显示效果 | Background：rgba（0,0,0，0~1） |