8.前端笔记-CSS-背景设置
背景样式包括：背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
| 属性 | 取值 | 作用 |
|---|---|---|
| background-color | 预定义颜色值\rgb\16进制 | 背景颜色 |
| background-image | url(图片路径) | 背景图片 |
| background-repeat | repeat/no-repeat/repeat-x/repeat-y | 是否平铺 |
| background-position | x和y坐标赋值（方位名词或精确距离） | 背景位置 |
| background-attachment | scroll\fixed | 背景附着（是否滚动） |
| 复合背景写法 | background：各种背景设置属性 | 写法更简单 |
| 背景色透明 | background:rgba(0,0,0,0.3).范围0-1 | 背景色设置半透明 |
1、背景颜色
background-color:默认的颜色是透明的–transparent，也可以手动设置其他的背景颜色。
div{background-color:green;
}
Document
background-color设置背景颜色
2、背景图片
场景：设置logo或者一些装饰性图片。
设置背景图片和直接使用图片标签相比，有什么优点：
便于控制位置，背景图片可以铺满整个盒子
页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景图片会亚洲背景颜色
div{background-image:none;//默认没有背景图片或设置背景图片background-image:url(图片路径)
}
注意：设置背景图片时，所在的容器需要有默认宽度和高度或是设置宽度和高度，不然图片会显示不出来
Document
3、背景平铺
background-repeat,取值有：
repeat（默认是平铺）,no-repeat（不平铺），repeat-x(横向平铺)，repeat-y(纵向平铺)
3.1 平铺的效果
Document
3.2 不设置平铺的效果
Document
4、背景图片位置
banckground-position属性
x\y是表示x坐标和y坐标，可以使用方位名词或精确单位
background-position:x y;
| 参数值 | 说明 |
|---|---|
| length | 百分数/由浮点数和单位标识符组成的长度值 |
| position | top,center,bottom,left,right方位名词 |
4.1 参数是方位名词
- 如果指定的两个值都是访问名词，则两个值的前后顺序无关，比如：left top和top left效果一致
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
应用：
王者荣耀网站的一个装饰图模仿、背景图模仿
目标：
Document
成长守护平台
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
4.2 参数是精确单位
- 如果参数值是精确单位，第一个值必定是x，第二个是y
- 如果只写了参数值，则写的这个一定是x，没写的默认是y垂直居中
4.3 参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
5、背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
场景：做视差滚动效果
background-attachment:scroll—背景图像随对象内容滚动**（默认）**
background-attachment:fixed–背景图像固定
Document
成长守护平台
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
6、背景样式复合写法
属性值没有顺序要求，但一般习惯约定为：
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background: transparent url(image.png) repeat-y fixed top
7.背景颜色半透明-CSS3新增
最后一个参数是alpha透明度，取值范围在0-1之间
rgba的a
只是让盒子的背景色半透明，不影响盒子内容
background:rgba(0,0,0,0.3)
Document
综合练习：
实现一个可以切换背景图颜色的导航栏
链接背景导航栏
效果如下：
鼠标悬浮：
