爱站程序员基地1. background概述
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
| 属性 | 描述 |
|---|---|
| background-color: | 背景颜色 |
| background-image: | 背景图片地址 |
| background-repeat: | 是否平铺 |
| background-position: | 背景位置 |
| background-attachment: | 背景固定还是滚动 |
2. background-image设置背景图
-
background-image:url(\"imgs/main_bg.jpg\"),
- 如果属性在css文件中设置，而图片不在css文件夹中，那么路径前面加上返回上一层文件夹 …/
3. background-repeat背景图重复
- 默认情况下，背景图会铺满整个页面，背景图大小不够铺满整个页面时，背景图会在横坐标和纵坐标中进行重复；
| 属性 | 属性值 | 描述 |
|---|---|---|
| background-repeat: | repeat | 横、纵坐标重复（默认值） |
| no-repeat | 不重复 | |
| repeat-x | 只在x轴重复、y也一样 |
4. background-size设置背景图的尺寸
| 属性 | 属性值 | 描述 |
|---|---|---|
| background-size: | contain | 图片要完整的显示在指定的区域，不能改变图片的比例,可能有部分空白区域 |
| cover | 图片撑满整个指定区域，而且比例不变，可能会溢出 | |
| 100% | 横向撑满，纵向按比例缩放 | |
| 100% 100% | 横、纵向撑满，图片比例可能会发生变化 | |
| x y | 可以设置数值代表横、纵向的像素尺寸 |
5. background-position设置背景图位置
预设值： left、bottom、right、top、center（居中）
| 属性 | 属性值 | 描述 |
|---|---|---|
| background-position: | center | 背景图横、纵向居中 |
| center top | 横向居中，纵向靠上 | |
| center bottom | 横向居中，纵向靠下 | |
| left center | 横向靠左，纵向居中 |
注：也可以用数值或百分比如background-position：10px 10px 表示横、纵坐标离左边、上边边框的距离；
6. background-attachment设置为是否固定
| 属性 | 属性值 | 描述 |
|---|---|---|
| background-attachment: | fixed | 背景图相对于视口 |
| scroll | 不固定（默认值） |
7. 6. 背景图和背景颜色混用
- 当背景图覆盖不了盒子时，空白的地方可以用背景颜色填充，可以选用背景图边缘的颜色作为背景颜色
8. 速写（简写）background
- background：url(“imgs/main.jpg”) no-repeat 50% 50%/100% fixed #000
顺序为设置图片、不重复、位置、尺寸、视口、背景颜色，因为位置和尺寸都有可能为百分比，所有浏览器规定尺寸必须写在位置后面中间加/隔开。 - 有些属性可以不写，不写会按默认值处理
- background：背景颜色、背景图片地址、背景平铺、背景固定、背景位置、背景图片尺寸
9. 有含义的背景图，需要在元素里添加文字
- 在网速不好的时候，加载不出来CSS属性的时候，会显示文字；
- 在网速正常的时候，能加载CSS属性，则显示图片；
- 所以书写代码的时候需要添加文字，然后隐藏文字；
- 方法一.文本缩进：text-indent：px，文本不换行：white-space：nowrap；把文本挤出到盒子外面，然后隐藏溢出：overflow：hidden；
- 方法二.背景可以覆盖内边距，高度设置为0，padding-top内边距设置为原先高的值，这样背景图正常显示，文本就在盒子外面，然后隐藏溢出：overflow：hidden；
- 方法三，把文本用span元素包裹起来，然后隐藏span盒子。
10. 背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
