前端之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. 仅仅 IE8 有效的 CSS hack 写法

    IE8 CSS hack 就是在属性后面加上 \9 或者 \0,代码如下: color:#FFF\0; /* IE8 */ color:#FFF\9; /* 所有IE浏览器(ie6+) */ 上面的 ...

  2. sizeToFit & sizeThatFits

    [sizeToFit & sizeThatFits] 1.sizeToFit,根据sizeThatFits方法返回的大小来调整receiver的大小.自定义子类不应该覆盖这个方法. 2.siz ...

  3. 马婕 2014MBA专硕考试报刊选读 5 朱令案悬而未决引起全社会的关注(转)

    http://blog.sina.com.cn/s/blog_3e66af4601016pkh.html Why hasn’t doubt over poisoning subsided? 公众对于朱 ...

  4. JQuery中button提交表单报TypeError: elem[type] is not a function jquery

    错误: TypeError: elem[type] is not a function jquery 解决: 出现这种现象的原因是,提交的表单中,有标签的name,有以submit命名的 name中不 ...

  5. selenium设置代理，基于chrome浏览器

    工作中遇到需要对项目中使用的selenium设置代理,跟大家分享一下. 1.下载chromeDriver:http://chromedriver.storage.googleapis.com/inde ...

  6. WCF Service 配置文件注释（转）

    <?xml version="1.0" encoding="utf-8" ?> <configuration> <system.S ...

  7. 监控小工具（jconsole）

    偶然发现的一个监控小工具 配置好Jmeter运行的环境,在CMD命令中输入:jconsole 即可弹出一个[java监视和管理控制台]

  8. shell 脚本 随机抽取班上学生

    #!/bin/bash # jw=('王浩' '谢云生' '黄科杨' '何星宇' '张宸兵' '邓培林' '刘桃' '杨沛东' '楚齐文' '咸鱼' '杨东' '>黄庭辉' '郑少文' '师靖' ...

  9. oracle ebs 11i > concurrent programs –> request group –> responsibility

    --concurrent programs --request group --responsibility SELECT fr.responsibility_key,       fr.respon ...

  10. solr特点三: 排序样例汇总

    目的是提供solrj 实现 查询的样例参考 单维度排序 //查询条件 query.setQuery(queryString); // add 是添加 query.addSortField(field_ ...