背景颜色
设置元素的背景颜色 ： background-color : 颜色 | transparent
transparent是全透明黑色（black) 的速记法，类似 rgba (0,0,0,0这样的值)
颜色值 （颜色名 | RGB | 十六进制
背景区包括内容，内边距（padding) 和边框， 不包括外边距 （margin）
背景图片
设置元素的背景图片 background-image : URL | none
url地址可以是相对地址也可以是绝对地址：：：如果样式表是外链的，那么要书写从CSS到图片的路径而不是从HTML出发
元素的背景占据看元素的全部尺寸，包括内边距和边框，但不包括外边距
默认的，背景图像位于元素的左上角，并在水平和垂直方向上重复。
注意 background-image:url();
如果背景图片有透明区域，会看到网页的背景，可以通过在 background-image: 颜色 url();url 前方设置填充色将透明区域设置为自己想要的颜色。。。相当于给图片换一下背景。。。
<style>
div {
width:300px;
height:300px;
background-image:url();
}
</style>
背景图片 重复
设置元素的背景图片的重复方式 background-repeat : repeat(x方向和y方向均重复） | no-repeat（x方向和y方向均不重复） |repeat-x （只x方向重复） |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>Document</title>
<style>
div {
width:500px;
height:500px;
margin-bottom:20px;
background-image:url(logo.png);
border: 1px solid #000;
}
.box1 {
background-repeat:repeat;
}
.box2 {
background-repeat:repeat-x;
}
.box3 {
background-repeat:repeat-y;
}
.box4 {
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
