CSS背景

1.背景颜色： background-color: #bfa;

2.背景图片：background-image: url("");

如果同时设置背景颜色和背景图片，则背景颜色会成为背景图片的背景颜色

当图片的大小和元素的大小不一样时，

图片小于元素	图片会多个铺满元素
图片大于元素	一部分无法显示
图片等于元素	正常显示

3.设置图片铺满元素的方式：

background-repeat: repeat;  默认值，沿x和y方向同时铺满

 background-repeat: repeat-x;沿着x方向铺满

 background-repeat: repeat-y;沿着y方向铺满

 background-repeat: no-repeat;不铺满

4.设置图片在元素中的位置：

background-position:center ;

通过方位词：left，right，center，top，bottom，

        即在一个九宫格中，一个位置用两个方位词表示，如果只有一个方位词，另一个默认是center

通过偏移量

        即图片相对于左上角偏移多少个像素，可正可负。雪碧图（CSS-sprite）的应用原理。

雪碧图：把一张包含许多小图片的大图片，通过调整position和元素大小，来设置获得想要的小图片。

5.背景图片大小

background-size: 100px 100px; 第一个设置宽度，第二个设置高度

只写一个另一个默认是auto，图片会等比例缩放

特殊值：cover，图片比例不变，将元素铺满，但可能不完整；contain 图片比例不变，图片在元素中完整显示，但不铺满。

6.背景的范围

background-clip: content-box;背景只在内容区显示

border-box	默认值背景会在边框下边显示
padding-box	背景显示到内边距，不会在边框显示
content-box	背景显示到内容区

7.背景图片的偏移量原点

  background-origin: content-box;内容区左上角为原点

border-box	背景图片的原点是边框左上角
padding-box	默认值，背景显示的原点是内边距左上角
content-box	背景的原点是内容区的左上角

8.背景图片是否跟随元素滚动

 background-attachment: scroll;跟随滚动

background-attachment: fixed;固定不滚动