HTML&CSS基础-图片按钮闪烁解决方案

时间 2020-04-29

标签 html&css html css 基础图片按钮闪烁解决方案栏目 CSS 繁體版

原文原文链接

　　　　　　　　　　　　　HTML&CSS基础-图片按钮闪烁解决方案css

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　做者：尹正杰html

一.图片按钮存在闪烁的案例缓存

1>.HTML源代码url

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片按钮</title>
         <style type="text/css">
             /** * 作完功能之后，发如今第一次切换图片时，会发现图片有一个很是快的闪烁，这个闪烁会形成一次不佳的体验。 * * 产生闪烁的缘由: * 背景图片是之外部资源的形式加载进网页的，浏览器每加载一个外部资源就须要单独发一次http请求,可是咱们 * 外部资源并非同时加载，浏览器惰性的，它默认会在资源被使用时才去加载资源。也就是说，在我们这个案例中，一 * 上来只会加载link.png这个背景图片，因为伪类hover和active的状态没有立刻触发，因此hover.png和 * active.png并非当即加载的，而是当hover被触发时浏览器才会去加载hover.png，当active被触发时才回去 * 加载active.png。因为加载图片须要必定的时间，因此在加载和显示过程会有一段时间，背景图片没法显示，致使出现 * 闪烁的状况。当第二次再去触发时我们又会发现就不会出现闪烁的状况，那是由于浏览器使用了第一次下载图片的缓存。 * */ .btn{
                 /*将a转换为块元素*/ display: block;
                 /*设置宽高*/ width: 93px; height: 29px;
                /*设置背景图片*/ background-image: url(img/btn/link.png);
                /*设置图片不重复*/ background-repeat: no-repeat;
             } .btn:hover{
                 /*设置鼠标移入连接时的背景图片*/ background-image: url(img/btn/hover.png);
             } .btn:active{
                 /*设置鼠标正在点击连接时的背景图片*/ background-image: url(img/btn/active.png);
             }
         </style>
    </head>
    <body>
        
        <!--建立一个超连接-->
        <a class="btn" href="#"></a>
    </body>
</html>

2>.浏览器打开以上代码渲染结果spa

二.解决图片按钮闪烁方案-图片整合技术(CSS-Sprite)code

1>.HTML源代码htm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片按钮</title>
         <style type="text/css">
             /** * 作完功能之后，发如今第一次切换图片时，会发现图片有一个很是快的闪烁，这个闪烁会形成一次不佳的体验。 * * 产生闪烁的缘由: * 背景图片是之外部资源的形式加载进网页的，浏览器每加载一个外部资源就须要单独发一次http请求,可是咱们 * 外部资源并非同时加载，浏览器惰性的，它默认会在资源被使用时才去加载资源。也就是说，在我们这个案例中，一 * 上来只会加载link.png这个背景图片，因为伪类hover和active的状态没有立刻触发，因此hover.png和 * active.png并非当即加载的，而是当hover被触发时浏览器才会去加载hover.png，当active被触发时才回去 * 加载active.png。因为加载图片须要必定的时间，因此在加载和显示过程会有一段时间，背景图片没法显示，致使出现 * 闪烁的状况。当第二次再去触发时我们又会发现就不会出现闪烁的状况，那是由于浏览器使用了第一次下载图片的缓存。 * * 解决方案: * 为了解决上述d问题，能够将三个图片整合为一张图片，这样能够同时将三张图片一块儿加载，就不会出现闪烁的问题了， * 而后经过background-position属性来切换显示图片的位置，这种技术叫作图片整合技术(CSS-Sprite),这种技术有 * 如下优势: * 1>.将多个图片整合为一张图片里，浏览器只须要发送一次http请求能够同时加载多个图片(提升了访问效率,也提升了用户体验) * 2>.将多个图片整合为一张图片，减少了图片的总大小，提升请求的速度，增长的用户体验 * * 舒适提示: * 图片中会保存一个叫颜色表属性，若是下载三个图片就会保存三个图片的颜色表，下载一个图片只须要保存一个颜色表从而节省了必定的存储空间 * * */ .btn{
                 /*将a转换为块元素*/ display: block;
                 /*设置宽高*/ width: 93px; height: 29px;
                /*设置背景图片*/
                /*background-image: url(img/btn/link.png);*/ background-image: url(img/btn/btn.png);
                /*设置图片不重复*/ background-repeat: no-repeat;
             } .btn:hover{
                 /*设置鼠标移入连接时的背景图片*/
                 /*background-image: url(img/btn/hover.png);*/ background-image: url(img/btn/btn.png);
                 /*当hover状态时，但愿图片能够向左移动*/ background-position: -93px 0px;
             } .btn:active{
                 /*设置鼠标正在点击连接时的背景图片*/
                 /*background-image: url(img/btn/active.png);*/ background-image: url(img/btn/btn.png);
                 /*当active状态时，但愿图片能够再一次向左移动*/ background-position: -186px 0px;
             }
         </style>
    </head>
    <body>
        
        <!--建立一个超连接-->
        <a class="btn" href="#"></a>
    </body>
</html>

2>.浏览器打开以上代码渲染结果blog