前端之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. Nuget安装 Identity组件。

    Install-Package Microsoft.AspNet.Identity.EntityFramework –Version 2.0.0(2.2.1) Install-Package Micr ...

  2. spark yarn 集群提交kafka代码

    配置好hadoop的环境,具体根据http://blog.csdn.net/u010638969/article/details/51283216博客所写的进行配置. 运行start-dfs.sh启动 ...

  3. jQuery自定义动画

    $(function(){ $(".btn1").click(function(){ $(','opacity':'toggle'}); }); $(".btn2&quo ...

  4. msfconsole邮件收集器模块

    msfconsole search email collector use auxiliary/gather/search_email_collector show options 下面我们设置域名. ...

  5. linux每天一小步---find命令详解

    1 命令功能 find命令用于搜索指定目录下的文件,并配合参数做出相应的处理. 2 命令语法      find  搜索路径pathname 选项option [-exec -ok -print  执 ...

  6. WPF 绑定备忘单

     Part I – Common Examples Basic Binding   {Binding}  Bind to current DataContext. {Binding Name}  Bi ...

  7. PYTHON 和R的对比

    为了鼓励新工具的出现,机器学习和数据分析领域似乎已经成了“开源”的天下.Python 和 R 语言都具有健全的生态系统,其中包括了很多开源工具和资源库,从而能够帮助任何水平层级的数据科学家展示其分析工 ...

  8. PHP 实现简单搜索功能

    方案:问答搜索 1. 搜索结果列表,高亮显示搜索关键词内容 2. 用户输入内容,点击搜索        2.1 获取用户的搜索内容:        2.2 调用分词服务,获取对搜索内容的分词:     ...

  9. [leetcode] 12. Merge Sorted Array

    这道题的无聊之处在于题目其实给了一些很奇怪的测试用例.比如他会给一些空的数组来,但是这个是不科学的,因为在C++中不允许定义一个空的列表,我们用的又不是那种糙又快的python,所以在这里我遇到了一些 ...

  10. Android-SurfaceView生命周期

    SurfaceView的生命周期,和 Activity生命周期,Service生命周期,BroadcastReceiver生命周期,等,不一样: 因为SurfaceView显示的是(视频画面,游戏画面 ...