前端之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. (转)SQL Server内存遭遇操作系统进程压榨案例

    原文地址:http://www.cnblogs.com/zc_0101/p/3592259.html 场景: 最近一台DB服务器偶尔出现CPU报警,我的邮件报警阈(请读yù)值设置的是15%,开始时没 ...

  2. Tempdb--查看TempDB上是否需要增加文件

    SELECT [owt].[session_id], [owt].[exec_context_id], [owt].[wait_duration_ms], [owt].[wait_type], [ow ...

  3. asp:Repeater数据源为空时处理方式

    当Repeater的数据源为空时,会显示空白,界面不友好,以下方式可以简单处理. <asp:repeater runat="server" id="rplist2& ...

  4. Python 日常学习

    习惯了java的思想.用java的思想来获取python元组中的数据.结果出错了. yuanzu_s = ("one", "two", "three& ...

  5. button不能添加伪类元素

    今日试了一下button添加伪类元素,结果是不行的前后都叠加在一起 html代码: <button class="form_btn" formType="submi ...

  6. SpringMVC框架 SpringMVC的获取01

    ---恢复内容开始--- SpringMVC通过实现MVC模式,很好地将数据.业务与展现进行了分离.从MVC的角度来说,SpringMVC和Struts2非常类似,但SpringMVC采用了可插拔的组 ...

  7. CF1110G Tree-Tac-Toe（博弈论）

    题面 传送门 题解 博弈论的前提是双方都是绝顶聪明的人 所以这种题目显然不是我应该做的 题解 //minamoto #include<bits/stdc++.h> #define R re ...

  8. memcache面试题汇总

    1,memcached是原子的吗? 所有的被发送到memcached的单个命令是完全原子的.如果您针对同一份数据同时发送了一个set命令和一个get命令,它们不会影响对方.它们将被串行化.先后执行.即 ...

  9. sprintf与strcat

    sprintf可以将整数转化为字符串,也可以连接两个字符串.但是用sprintf在连接两个字符串时,容易出现错误. 因此连接两个字符串时候用strcat, 将整数转化为字符串时候用sprintf. 转 ...

  10. apollo配置中心初探

    近在搞微服务框架的开发,需要有一个配置中心来满足统一管理业务应用以及组件的配置,在此期间也使用了多个配置中心比如:spring cloud config,自研的配置中心,当然还有apollo. spr ...