背景（下拉框P86 记得重复看） 解决多张效果图片闪烁 雪碧图

background-color

background-image：url（“./”）

background-repeat

可选值：repeat（X Y轴重复）   repeat-x    repeat-y    no-repeat不重复

 background-position（必须指定2个值）top left bottom right center 

 

应用广泛  

 

a href=“js：；”

a：link {

            display：block；

           background-image：url（“”）

}

a：hover { background-position：x  y}

a：active { background-position：x  y}

图片属于外部资源，当浏览网页时，用的时候才向服务器请求加载

触发后才加载  所以需要多张效果图连在一起，用background-position调位置（将多张图放在一个大图里）

 

雪碧图（包含许多元素的大图）

1.确定图标

2.测量图标大小

3.创建div

4.将雪碧图设置为元素的背景background-image

5.background-position