前端基础---使用普通背景图当按钮背景时出现的问题(以及背景简写)
* 做完功能以后,发现在第一次切换图片时,会发现图片有一个非常快的闪烁,
* 这个闪烁会造成一次不佳的用户体验。
* 产生问题的原因:
* 背景图片是以外部资源的形式加载进网页的,浏览器每加载一个外部资源就需要单独的发送一次请求,
* 但是我们外部资源并不是同时加载,浏览器会在资源被使用才去加载资源
* 我们这个练习,一上来浏览器只会加载link.png由于hover和active的状态没有马上触发,
* 所以hover.png和active.png并不是立即加载的
* 当hover被触发时,浏览器才去加载hover.png
* 当active被触发时,浏览器才去加载active.png
* 由于加载图片需要一定的时间,所以在加载和显示过程会有一段时间,背景图片无法显示,导致出现闪烁的情况
*
* 为了解决该问题,可以将三个图片整合为一张图片,这样可以同时将三张图片一起加载,就不会出现闪烁的问题了,
* 然后在通过background-position来切换要显示的图片的位置,这种技术叫做图片整合技术(CSS-Sprite)
* 优点:
* 1 将多个图片整合为一张图片里,浏览器只需要发送一次请求,可以同时加载多个图片,
* 提高访问效率,提高了用户体验。
* 2 将多个图片整合为一张图片,减小了图片的总大小,提高请求的速度,增加了用户体验
* background的简写模式
* - 通过该属性可以同时设置所有背景相关的样式
* - 没有顺序的要求,谁在前谁在后都行
* 也没有数量的要求,不写的样式就使用默认值
background: #bfa url(img/3.png) center center no-repeat fixed;