前端之HTML，CSS（十）

　　精灵技术与精灵图

　　精灵技术本质

　　精灵技术是一种处理网页背景图像的方式，实质是将小的背景图片拼接到一张大的背景图像上。拼接成的大图被称为精灵图。浏览器打开网页时，每一个图片显示都是浏览器向服务器发送一次请求的结果，精灵技术是把多个小图片拼接为一个大图，有效减少了浏览器请求服务器的次数，与此同时也提高了页面的加载速度。

　　精灵技术使用

　　精灵技术实际是通过background属性限定盒子大小以后，通过background-position属性调整背景图片的位置，使得一个大图上的小图片局部显示出来，未显示的部分由于盒子大小有限，且作为盒子的背景图片，不会显示在页面上。

　　测试用图片为王者荣耀下载游戏保存的图片，操作方式鼠标右击选线open in new tab，打开新页面后右键图片另存为...得到图片。

　　精灵图

　　精灵技术使用代码

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>王者荣耀</title>

     <style type="text/css">

         .sprite-1 {

             background: url(images/index.png) no-repeat -0px -182px;

             width: 29px;

             height: 27px;

         }

         .sprite-2 {

             background: url(images/index.png) no-repeat 0px -350px;

             width: 236px;

             height: 106px;

         }

     </style>

 </head>

 <body>

     <div class="sprite-1">

     </div>

     <div class="sprite-2">

     </div>

 </body>

 </html>

　　效果

　　滑动门

　　滑动门是利用精灵技术设定等高盒子，两个盒子设定同样的背景图片，再由盒子的内容撑开盒子实现了盒子根据内容大小的自适应。

　　背景用图

　　测试代码，自行改变代码中内容的，观察盒子横向伸缩。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>滑动门-测试</title>

     <style type="text/css">

         a {

             display: inline-block;

             height: 33px;

             line-height: 33px;  /*内容居中对齐*/

             background: url(images/wx.png) no-repeat; /*设置左盒子背景靠左显示*/

             padding-left: 15px;

         }

         span {

             display: inline-block;

             height: 33px;

             text-decoration: none;

             color: #fff;

             background: url(images/wx.png) no-repeat right; /*设置右盒子背景靠右显示*/

             padding-right: 15px;

         }

     </style>

 </head>

 <body>

     <a href="#">

         <span>改变字数试试</span>

     </a>

 </body>

 </html>

认识CSS中精灵技术（sprite）和滑动门的更多相关文章

  1. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  2. css:background-position > 精灵技术

    background-position : length || length background-position : position || position 取值: length  : 百分数 ...

  3. css+html应用实例1：滑动门技术的简单实现

    关于滑动门,现在的页面中好多地方都会用到滑动门,一般用作于导航背景,它的官方解释如下: 滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果. 为什么 ...

  4. css sprites精灵技术：Html将所有图片放在一张图片上

    使用最近做的某项目常见页面作为联系素材: 分析:1.切图:步骤条可以切成四种图,即黄灰.红黄.红.灰. 2.html:需要五个li标签,每个包含一个图片及文字. 将要取得图片放到同一张图片上,从左到右 ...

  5. CSS的精灵技术

  6. CSS滑动门

    如下图所示,每个导航栏目的文字个数不一样多,有的长,有的短,如何用一张背景图片,适应不同字数”的导航条,“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边 ...

  7. JS滑动门,JQuery滑动门

    <a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...

  8. CSS 精灵技术（sprite）

    一.精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.  然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...

  9. CSS之 元素显示隐藏，用户界面样式，文本溢出隐藏，精灵技术，三角形

    元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...

随机推荐

  1. open /etc/docker/certs.d/registry.access.redhat.com/redhat-ca.crt: no such file or directory 解决方案

    方法一.  yum安装 yum install *rhsm* 方法二 (我是用这方法解决的) 执行命令: ①   wget http://mirror.centos.org/centos/7/os/x ...

  2. 在PowerDesigner中设计物理模型1——表和主外键(转)

    出处:http://www.cnblogs.com/studyzy/archive/2009/12/15/1624899.html 在PD中建立物理模型由以下几种办法: 直接新建物理模型. 设计好概念 ...

  3. join sql图

    SELECT * FROM TableA INNER JOIN TableB ON TableA.name = TableB.name   id  name       id   name --  - ...

  4. Android代码实现求和运算

    Android代码实现求和运算 实验要求: 用Android语言设计一个界面,点击某按钮实现求和运算. 代码实现 码云链接 核心代码 以上为求和按钮的代码截图,解析如图标注. 实验结果 当输入为空值时 ...

  5. Linux 基础教程 27-ss和ip命令

    什么是netstat     在Linux系统中输入 man netstat,显示的结果如下所示: netstat - Print network connections, routing table ...

  6. C++ 的Tool工具收集

    C++ 的Tool工具收集 1. muparser - Fast Math Parser Library 数学公式解析函数,开源工具库 网址: http://muparser.beltoforion. ...

  7. npm是干什么的？

    允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用. 其实npm ...

  8. Oracle E-Business Suite并发请求的优先级（Concurrent Request Priority）

    不少用户抱怨自己的Oracle E-Business Suite并发请求(Concurrent Request)提交了好久,但还是一直在排队,等了好久还没有执行.用户希望对于一些重要性程度高.响应要求 ...

  9. SQL -- What Tables Queries are Used to Display the Counts in the Inventory Account Periods form (INVTTGPM.fmb) (Doc ID ID 357997.1)

    Applies to: Oracle Inventory Management - Version 11.5.9 to 12.1.3 [Release 11.5 to 12.1] Informatio ...

  10. .NET Core2使用Azure云上的Iot-Hub服务

    基于工业4.0大背景下的工业物联网是近几年内热门的话题,依靠信息化技术企业可以实现数字化转型,生产可以实现智能化制造,设备可以实现自动化运作.然而,海量的数据采集是整个建设过程的基础环节,如何处理与利 ...