CSS之背景属性

background-color 背景颜色
background-image 背景图片 background-image:url();
background-repeat 平铺方式

    background-repeat:repeat; //默认值 背景重复
    background-repeat:no-repeat; // 不重复
    background-repeat:repeat-x; //横向平铺
    background-repeat:repeat-y; //纵向平铺

background-position 背景定位

background-position:0 0 //默认值 第一个值为x方向第二个值为y方向
background-position-x:100px; //单独设置x方向
background-position-y:100px; //单独设置y方向
background-position: top center; //特数字也可以

background-size 控制背景图大小

结合一下！

background:url() no-repeat center top;

雪碧图技术

什么是雪碧图技术呢？
它是一种图像拼合技术。将多个小图标和背景图像合并到一张图片上，利用css的背景定位来显示需要显示的图片部分

使用雪碧图的场景

静态图片，不随用户信息变化而变化
小图片，图片比较小（2~3kb）
加载量比较大
一些大图不建议使用雪碧图

优点:

有效的减少了HTTP请求数量
加速内容显示