前端之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. Image 和byte[]之间的转换

    1.Image 转 byte[] public byte[] GetByteByImage(Image image) { byte[] bt = null; try { if (!image.Equa ...

  2. MFC中的一般经验之谈5

    MFC中提供了CString的类,可以用在一切使用字符串的地方.可以完美取代const char* 或者 LPCTSTR(经常在WinAPI)中传递参数.并且如果需要通过空间进行字符串的数据传递DDX ...

  3. ZOJ3712：Hard to Play

    MightyHorse is playing a music game called osu!. After playing for several months, MightyHorse disco ...

  4. centos mysql忘记密码找回（仅限mysql5.7）

    1.停掉mysql 2.执行#mysqld_safe --user=mysql --skip-grant-tables --skip-networking & 3.#mysql 4.updat ...

  5. mysql server 自动断开的问题

    今天发现mysql的一个问题,当跑update语句的时候,mysql 服务会自动断掉,无论用 phpmyadmin, navicat , mysql workbench 甚至用 mysql命令行效果一 ...

  6. 开源WebGIS实施方案（三）：Shapefile数据导入到PostGIS

    PostGIS新版中提供了一个可视化的工具,用于Shapefile数据的导入和导出,极大的方便了使用者的操作. 创建空间数据库 以具有创建用户权限的账号登录pgAdminIII,连接到数据库 创建一个 ...

  7. Cockroachdb 四、用户管理及授权

    四 用户管理及授权 用户管理 简介# Create a user:cockroach user set <username> <flags> # List all users: ...

  8. centos7 安装SSH

    1.安装OpenSSH服务(CentOS系统默认安装了openssh)      yum install openssh-server -y 2.配置OpenSSH服务(默认的配置已可以正常工作) O ...

  9. CDH4.1.2 集群安装配置详细过程

    http://wenku.baidu.com/link?url=Wu43MFbzKH8hu7AgGfajmOr0WpRMX_gJlMDUs6pSrBK2LOJWIMpfWZa7IW-BSPko1yGl ...

  10. 去掉easyui tree 的默认图标

    $(".tree-icon,.tree-file").removeClass("tree-icon tree-file"); $(".tree-ico ...