背景属性

在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观，吸引访问者的眼球。CSS 中提供了一系列用于设置HTML元素背景效果的属性

1. background-color

使用 background-color属性为元素设置一个背景颜色，css中的颜色单位

英文单词：red，green，blue，transparent：透明
rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
rgba(r,g,b,alpha) 三原色每种取值0~255，alpha取值0（透明）~1（不透明）
十六进制表示：以#为前缀，分为长十六进制和短十六进制。
- 长十六进制：每两位为一组，代表一种三原色；每位的取值范围0~~9，a~~f 例：red rgb(255,0,0) #ff0000
- 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析

2. background-image

background-image 用来为某个元素设置背景图像

background-image : url("路径");

3. background-repeat

背景图片平铺方式

/* case 1 : 背景图片平铺 默认*/
div{ background-repeat: repeat; }

/* case 2 : 背景图片不平铺 */
div{ background-repeat: no-repeat; }

/* case 3 : 背景图片水平平铺 */
div{ background-repeat: repeat-x; }

/* case 4 : 背景图片垂直平铺 */
div{ background-repeat: repeat-y; }

4. background-position

background-position 属性用来设置背景图像的起始位置，该属性的可选值如下：

X允许的取值方式	Y允许的取值方式
left左对齐 center水平居中 right右对齐	top顶部对齐 center垂直居中 bottom底部对齐
px	px

如果只给一个值，那么第二个值默认center

CSS精灵图（Sprite）：

当用户访问一个网站时，浏览器会向服务器发送一系列请求，比如说网页上的每张图像都需要经过一次请求才能最终展示给用户。然而，一个网页中往往包含大量的图像资源（例如在页面中展示的图片、网页的背景图像以及一些装饰性的图像等），这就会导致浏览器频繁的请求服务器，大大降低网页的加载速度。为了有效的减少请求服务器的次数，提高页面加载的速度，就出现了 CSS Sprites 技术，也被称为精灵技术。

简单来讲，精灵技术就是一种处理网页背景图像的方式，它需要将一个页面中涉及到的所有或一部分较小的背景图像合并到一张较大的图片中，然后再将这个图片应用到网页种。通常情况下，我们只是将背景图像中那些较小的、零碎的图像集中到一个大的图像中，这个较大的图像被称为精灵图（也被称为雪碧图）

精灵图的使用也非常简单，只需要借助background-position 属性来定位背景图像的位置即可。

5. background-size

设置背景图片的尺寸，通常用于在不改变图片宽高比的情况下，铺满盒子。

background-size:X Y; X和Y默认和原图宽高对应，同时X Y可以是自己设定的百分比或像素

background-size:cover; 等比例缩放直到铺满X轴和Y轴；

background-size:contain; 等比例缩放直到铺满X或Y轴其中一个；

6. background-attachment

background-attachment：scroll; 默认值，背景随滚动而滚动；

background-attachment: fixed; 背景不随滚动而滚动

7. background

background是一个复合属性。

backgorund: color image repeat position/size attachment;

8. 背景图片和img标签对比

背景图片不占用content内容部分，而img标签会占用。
背景图片大小如果超出盒子是不会显示的，而img标签如果超出父级盒子默认是会超出显示的。

何时使用背景图片，何时使用img标签并没有一个确却的标准规定，可以根据实际情况做选择。如果为了给盒子加底色为内容部分加背景，或者是加一些小图标项目符号等，则使用背景图片。如果是确却的想表达一个图片信息，则使用img标签。

css和html描述背景属性