1. 背景颜色(color)
background-color:颜色值; 默认的值是 transparent 透明的
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {background-color: red;}</style></head><body><div>背景颜色</div></body></html>
2. 背景图片(image)
background-image : none | url (url)
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 500px;height: 400px;background-color: pink;/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/background-image: url(monkey.png);}</style></head><body><div>背景图片</div></body></html>
3. 背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 500px;height: 400px;background-color: pink;/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/background-image: url(monkey.png);/*默认的是平铺图 repeat*//* background-repeat: repeat; *//*背景图片不平铺*//* background-repeat: no-repeat; *//*横向平铺 repeat-x*//* background-repeat: repeat-x; *//*纵向平铺*/background-repeat: repeat-y;}</style></head><body><div>背景图片</div></body></html>
4. 背景位置(position)
background-position : length || lengthbackground-position : position || position
注意：
必须先指定background-image属性
position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 500px;height: 400px;background-color: pink;/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/background-image: url(monkey.png);/*背景图片不平铺*/background-repeat: no-repeat;/*背景位置*//*background-position: x坐标 y坐标;*//*background-position: right top; 右上角*//*background-position: left bottom; 左下角*//*background-position: center center; 水平居中 垂直居中*//*则两个值前后顺序无关 因为是方位名词*//*background-position: center left; *//*如果只指定了一个方位名词，另一个值默认居中对齐*//* background-position: top; *//*background-position: x坐标 y坐标;*//*background-position: right top; 右上角*//*那么第一个，肯定是 x 是 50 第二的一定是y 是 10*//*background-position: 50px 10px ;*//*以下说明 x 10像素 y 垂直居中的*//*background-position: 10px center;*/background-position: center 10px;}</style></head><body><div>背景图片</div></body></html>
小图片左侧对齐盒子案例：
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.icon {width: 150px;height: 35px;background-color: pink;font-size: 14px;font-weight: 500;line-height: 35px;background-image: url(logo.png);background-repeat: no-repeat;background-position: 10px center;text-indent: 2.5em;}</style></head><body><div class="icon">摄像机</div></body></html>
5. 背景附着
背景附着就是解释背景是滚动的还是固定的
background-attachment : scroll | fixed
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {height: 3000px;background-color: pink;background-image: url(king.jpg);background-repeat: no-repeat;/*超大背景图片的做法 背景定位*/background-position: center top;/*背景固定的*/background-attachment: fixed;}</style></head><body><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p></body></html>
6. 背景简写
background：属性的值的书写顺序官方并没有强制标准的。
可以按照这个顺序写：
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background: transparent url(image.jpg) repeat-y scroll center top ;
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {height: 3000px;/* background-color: pink;background-image: url(king.jpg);background-repeat: no-repeat; *//*超大背景图片的做法 背景定位*//* background-position: center top; *//*背景固定的*//* background-attachment: fixed; *//*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/background: pink url(king.jpg) no-repeat fixed center top;}</style></head><body><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p><p>青春正能量，我要天天向上！</p></body></html>
7. 背景透明(CSS3)
background: rgba(0, 0, 0, 0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 700px;height: 120px;background-color: pink;}.demo1 {width: 700px;height: 30px;line-height: 30px;}.demo2 {width: 700px;height: 30px;background: rgba(0, 0, 0, 0.3);}</style></head><body><div><div class="demo1">青春正能量，我要天天向上！</div><div class="demo1">青春正能量，我要天天向上！</div><div class="demo1">青春正能量，我要天天向上！</div><div class="demo2">青春正能量，我要天天向上！</div></div></body></html>
8. 链接导航栏综合案例
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav {/*让里面的6个链接 居中对齐水平 这句话对 行内元素 行内块元素都有效果的*/text-align: center;}.nav a {/*有大小的 因为a 是行内元素 不能直接设置宽度和高 必须要转换 行内块元素*/display: inline-block;width: 120px;height: 50px;/*行高等于盒子的高度 就可以让单行文本垂直居中*/line-height: 50px;color: #fff;text-decoration: none;/*背景简写*/background: url(bg.png) no-repeat;}/*鼠标经过nav里面的链接， 背景图片更换一下就好了*/.nav a:hover {background-image: url(bgc.png);}</style></head><body><div class="nav"><a href="#">推荐</a><a href="#">新闻</a><a href="#">体育</a><a href="#">养生</a><a href="#">健康</a><a href="#">娱乐</a></div></body></html>
CSS 背景(background)（背景颜色color 背景图片image 背景平铺repeat 背景位置position 背景附着 背景简写 背景透明 链接导航栏综合案例）
