按钮练习：

当三个状态使用不同图片：一张图片是一次请求，三张图片不能同时加载

当三个状态使用一张图片：后两个状态可以不设置

图片闪烁：因为加载图片需要一定的时间，所以在加载和显示过程需要时间，背景图片无法显示，导致出现闪烁的情况

解决图片闪烁：将三个图片整合为一张图片，这样可以同时将三张图片一起加载，从而解决图片闪烁

  再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite），又叫雪碧图

  优点：      

        1、将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验      

        2、将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验

background属性：

background：在一个声明中设置所有的背景属性

background-size：规定背景图片的尺寸

background-color：规定要使用的背景颜色

可选值：

            color-name 

            color-rgb

            color-hex

            transparent                  

background-repeat：规定如何重复背景图像

可选值：

            repeat

            repeat-x

            repeat-y

            no-repeat

background-position：设置背景图像的开始位置

可选值：

        top left

        top center

        top right

        center left

        center center

        center right

        bottom left

        bottom center

        bottom right

background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动

可选值：

        scroll

        fixed

background-image：规定要使用的背景图像

可选值：

            url(URL)

            none

简写背景属性：

位置：

1、不设置时，默认center

2、两个都不设置时，默认左上角

颜色：

默认透明

如果在简写里没有设置颜色，颜色可以补在简写后面，写在简写前面没有效果

简写：

无顺序要求，不写的话默认值

1、background: yellow url(img/1.png) no-repeat fixed center center;

2、background: url(img/1.png) no-repeat fixed center center;

     background-color: yellow;