前端基础---使用普通背景图当按钮背景时出现的问题(以及背景简写)

         * 做完功能以后,发现在第一次切换图片时,会发现图片有一个非常快的闪烁,          *  这个闪烁会造成一次不佳的用户体验。          * 产生问题的原因:          *  背景图片是以外部资源的形式加载进网页的,浏览器每加载一个外部资源就需要单独的发送一次请求,          *  但是我们外部资源并不是同时加载,浏览器会在资源被使用才去加载资源          *  我们这个练习,一上来浏览器只会加载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;
上一篇:前端_JS-选项卡(tab 切换)


下一篇:spring.profiles.active=@profiles.active@的含义