按钮练习/简写背景属性

做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验产生问题的原因：背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求但是我们的外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源我们这个练习，一上来浏览器只会加载link.png由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的当hover被触发时，浏览器才去加载hover.png当active被触发时，浏览器才去加载active.png由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）优点：1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验..........................................................................................................................................<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>按钮练习</title><style type="text/css">.btn:link{/*将a转换为块元素*/display: block;/*设置宽高*/width: 93px;height: 29px;/*设置背景图片*/background-image: url(img/btn/btn2.png);/*设置背景图片不重复*/background-repeat: no-repeat;}.btn:hover{/*当是hover状态时，希望图片可以向左移动*/background-position: -93px 0px;}.btn:active{/*当是active状态时，希望图片再向左移动*/background-position: -186px 0px;}</style></head><body><!-- 创建一个超链接 --><a href="#" class="btn"></a></body></html>...................................................................................................................................                                                        简写背景属性设置一个背景颜色background-color: #bfa;设置一个背景图片background-image: url(img/3.png);设置背景不重复background-repeat: no-repeat;设置背景图片的位置ackground-position: center center;设置背景图片不随滚动条滚动background-attachment: fixed;...................................................................................................................................background- 通过该属性可以同时设置所有背景相关的样式- 没有顺序的要求，谁在前睡在后都行- 也没有数量的要求，不写的样式就使用默认值.................................................................................................................................................

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容