背景属性及雪碧图技术
background
常见背景属性:
| 属性 | 描述 |
|---|---|
| background-color | 规定要使用的背景颜色 |
| background-image | 规定要是用的背景图像 |
| background-size | 规定背景图像的尺寸 |
| background-repeat | 规定如何重复背景图像 |
| background-attachment | 规定背景图像是否固定或者随着页面的其他部分滚动 |
| background-position | 规定背景图像的位置 |
| inherit | 规定从父元素继承background属性的设置 |
background-image
background-image 属性为元素设置背景图像
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
默认的，背景图像位于元素的左上角，并在水平和垂直方向上重复
background-repeat 设置元素平铺的方式
属性值：
| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在水平和垂直方向上重复 |
| repeat-x | 背景图像将在水平方向上重复 |
| repeat-y | 背景图像将在垂直方向上重复 |
| no-repeat | 背景图像将仅显示一次 |
| inherit | 继承父元素background-repeat 属性值 |
background-position
background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置
属性值：
background-attachment
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
属性值：
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而滚动 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
雪碧图技术(精灵图技术)
CSS 雪碧即 CSS Sprite，也叫CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分
CSS 雪碧图应用原理就是截取大图一部分显示，而这部分就是一个小图标
使用雪碧图的好处：
- 利用CSS Sprite能很好的减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
- CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
- 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
- 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便
缺点:
- CSS雪碧的最大问题是内存使用
- 拼图维护比较麻烦
- 使CSS的编写变得困难
- CSS 雪碧调用的图片不能被打印
我们可以使用background综合属性制作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大，
那么我们可以此属性来制作通天banner。
background: red url('./images/banner.jpg') no-repeat center top;
