练习-----背景重复（渐变背景）和按钮练习（图片闪烁）

      1.  背景重复：当一个导航条由上到下的背景颜色不同时，就不能单用background-color来设置，此时我们可以截取此导航条，将其作为背景图片，水平铺开（注意：在截取时，截取的高度要与导航条高度相同，截取宽度为1，再将其在水平方向重复即可）。

 

        2. 按钮练习：图片属于网页中的外部资源，浏览器需要单独发送加载请求。注意：浏览器在加载外部资源时是按需加载，有需要则加载，没需要则不加载，在下面的练习中，link在一开始就被加载，hover和active只有在指定条件被触发时才会被加载。另外在加载图片的间隙，会出现图片闪烁的问题。

3. 解决图片闪烁问题的办法：将多个小图片放到一个大图片里，将多个图片同时加载到网页里，通过background-position来显示相应的图片，这样可以要有效的解决图片闪烁的问题，这种技术在网页中十分常见，被称为css-sprite，这种图片我们也称为雪碧图。

        雪碧图的使用步骤：

                        1. 确定要使用图片

                        2. 测量图片的大小

                        3. 将测量结果创建为一个元素

                        4. 将雪碧图设置为该元素的背景图片

                        5. 设置background-position，以显示正确的图片

        雪碧图的特点：一次性将多个图片加载到网页中，降低请求次数，提高访问速度，提升用户体验。（注意：雪碧图只适用于背景图片，img不可以）