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

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

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

1>.HTML源代码

<!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>.浏览器打开以上代码渲染结果

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

1>.HTML源代码

<!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>.浏览器打开以上代码渲染结果

初识python面向对象编程的更多相关文章

  1. python 面向对象编程学习

    1. 问题:将所有代码放入一个py文件:无法维护 方案:如果将代码才分放到多个py文件,好处: 1. 同一个名字的变量互相不影响 2.易于维护 3.引用模块: import module 2.包:解决 ...

  2. 初识python面向对象

    一.初识python面向对象: class Person: #使用class关键字定义一个类 age=0 #类变量(静态变量) def eat(self,food): #定义一个方法 self.age ...

  3. python 面向对象编程（一）

    一.如何定义一个类 在进行python面向对象编程之前,先来了解几个术语:类,类对象,实例对象,属性,函数和方法. 类是对现实世界中一些事物的封装,定义一个类可以采用下面的方式来定义: class c ...

  4. Python面向对象编程指南

    Python面向对象编程指南(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1SbD4gum4yGcUruH9icTPCQ 提取码:fzk5 复制这段内容后打开百度网 ...

  5. python面向对象编程进阶

    python面向对象编程进阶 一.isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls 的对象 1 ...

  6. Python面向对象编程（下）

    本文主要通过几个实例介绍Python面向对象编程中的封装.继承.多态三大特性. 封装性 我们还是继续来看下上文中的例子,使用Student类创建一个对象,并修改对象的属性.代码如下: #-*- cod ...

  7. Python 面向对象编程——访问限制

    <无访问限制的对象> 在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑.但是,从前面Student类的定义来看(见:Py ...

  8. Python 面向对象编程 继承 和多态

    Python 面向对象编程 继承 和多态 一:多继承性 对于java我们熟悉的是一个类只能继承一个父类:但是对于C++ 一个子类可以有多个父亲,同样对于 Python一个类也可以有多个父亲 格式: c ...

  9. Python 面向对象编程基础

    Python 面向对象编程基础 虽然Pthon是解释性语言,但是Pthon可以进行面向对象开发,小到 脚本程序,大到3D游戏,Python都可以做到. 一类: 语法: class 类名: 类属性,方法 ...

随机推荐

  1. TMS320VC5509片内ADC采集

    1. ADC采集比较简单,内部的10位的ADC,AIN0-AIN3的输入,主要是用的CSL的库函数#include <csl_adc.h> ; Uint16 samplestoraage[ ...

  2. Codeforces 946D - Timetable (预处理+分组背包)

    题目链接:Timetable 题意:Ivan是一个学生,在一个Berland周内要上n天课,每天最多会有m节,他能逃课的最大数量是k.求他在学校的时间最小是多少? 题解:先把每天逃课x节在学校呆的最小 ...

  3. 2、Docker镜像和镜像管理

    一.镜像介绍 1.定义 一个只读层被称为镜像,一个镜像是永久不会变的. 由于 Docker 使用一个统一文件系统,Docker 进程认为整个文件系统是以读写方式挂载的. 但是所有的变更都发生顶层的可写 ...

  4. [转]申瓯 JSY2000-06 程控电话交换机呼叫转移设置

    说明:若申瓯程控电话交换机分机有事不在位置上或遇忙分机正忙时为使某些重要来话不丢失,可设置将呼入本机的电话转移至其他分机及公网固定电话或手机.电话交换机使用了本功能不管分机用户在什么地方都能接听到办公 ...

  5. CEPH LIO iSCSI Gateway

    参考文档: Ceph Block Device:http://docs.ceph.com/docs/master/rbd/ CEPH ISCSI GATEWAY:http://docs.ceph.co ...

  6. 《Linux内核分析》 第四节 扒开系统调用的三层皮（上）

    <Linux内核分析> 第四节 扒开系统调用的三层皮(上) 张嘉琪 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com ...

  7. Leetcode题库——39.组合总和

    @author: ZZQ @software: PyCharm @file: combinationSum.py @time: 2018/11/14 18:23 要求:给定一个无重复元素的数组 can ...

  8. 这个C#程序真了不起

    (1)在2~31中,这个数不能且仅不能被两个相邻数整除 (2)2 123 581 660 200 (2,3,4,5,6,7,8,9,10,11,12,13,14,15,18,19,20,21,22,2 ...

  9. ElasticSearch 2 (31) - 信息聚合系列之时间处理

    ElasticSearch 2 (31) - 信息聚合系列之时间处理 摘要 如果说搜索是 Elasticsearch 里最受欢迎的功能,那么按时间创建直方图一定排在第二位.为什么需要使用时间直方图? ...

  10. HTML5之HTTP协议

    ---恢复内容开始--- 99%的人都理解错了HTTP中GET与POST的区别 2016.10.11 13:23:22来源: 51cto作者:51cto   (转)   GET和POST是HTTP请求 ...