今天重点学习了CSS精灵图。

“CSS精灵”，英语css sprite，所以也叫做“CSS雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。

用ps选框工具选择需要显示的部分，点开信息面板，width和height就是盒子的宽高，鼠标定位到图标的左上角，信息面板显示的x和y的值就是背景定位值，记得加负号。默认左上角为（0,0）。

利用背景定位background-position:x y;显示图标。向右向下为正值。向左向上移为负值。

最后做了个小练习拼自己的名字。代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>精灵图练习</title>

     <style>

         .box{

             height:138px;

         }

         .box span{

             float: left;

             display: block;

             height:138px;

         }

         .d{

             width:112px;

             height:127px;

             background: url(timg.jpg) no-repeat -527px -42px;

         }

         .e{

             width:100px;

             height:134px;

             background: url(timg.jpg) no-repeat -707px -34px;

         }

         .n{

             width:113px;

             height:130px;

             background: url(timg.jpg) no-repeat -14px -391px;

         }

         .g{

             width:133px;

             height:146px;

             background: url(timg.jpg) no-repeat -22px -201px;

         }

         .l{

             width:99px;

             height:134px;

             background: url(timg.jpg) no-repeat -767px -211px;

         }

         .box1{

             padding-top: 20px;

         }

         .box1 span{

             display: block;

             float:left;

             height:165px;

         }

         .D{

             width:78px;

             height:167px;

             background: url(timg1.jpg) no-repeat -587px -10px;

         }

         .E{

             width:76px;

             height:167px;

             background: url(timg1.jpg) no-repeat -706px -8px;

         }

         .N{

             width:76px;

             height:167px;

             background: url(timg1.jpg) no-repeat -362px -398px;

         }

         .G{

             width:76px;

             height:167px;

             background: url(timg1.jpg) no-repeat -311px -202px;

         }

         .L{

             width:85px;

             height:167px;

             background: url(timg1.jpg) no-repeat -138px -396px;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <span class="d"></span>

         <span class="e"></span>

         <span class="n"></span>

         <span class="g"></span>

         <span class="l"></span>

         <span class="e"></span>

     </div>

     <div class="box1">

         <span class="D"></span>

         <span class="E"></span>

         <span class="N"></span>

         <span class="G"></span>

         <span class="L"></span>

         <span class="E"></span>

     </div>

 </body>

 </html>

运行效果：

第9天：CSS精灵图的更多相关文章

  1. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  2. Css - 精灵图

    Css - 精灵图css sprite 一个页面文档上总是会有N多的图标小图片,它们都是以背景图的方式嵌入文档,每个小图片需要一个url的css属性,每个url都指向一个服务器地址的链接,每个链接都代 ...

  3. css雪碧图-css精灵图

    先将图片拼接在一张图上.类似实现的效果图 图片地址为合并后的图片地址,通过background-position调整背景图的位置.效果如: HTML: <div class="logo ...

  4. CSS背景和精灵图

    如何设置背景图片? 1.在CSS中有个叫做background-image:url():的属性,就是专门用于设置背景图片的. 2.注意点: 1)图片的地址必须放在url()中,图片的地址可以是本地的地 ...

  5. H5 40-CSS精灵图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. HTML连载35-背景图片的练习、精灵图

    一.背景图片练习 解释:这个例子需要注意的是,我们背景图片嵌套到另一个图片之中.我们设计的注意点在于,怎么定位到我们想定位到的地方. 总结:背景图片就是一块一块的,我们想把块的位置定位好(一般就是宽和 ...

  7. CSS Spritec下载,精灵图，雪碧图，初探之原理、使用

    CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...

  8. CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图）

    一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...

  9. Uint 7.文本和字体属性,background,精灵图和3种定位

    一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...

随机推荐

  1. voa 2015.4.29

    Nepal has declared three days of mourning for the victims of Saturday's 7.8 magnitude earthquake tha ...

  2. 基于封装通用的EF CRUD 的操作

    1.  Entity Framework是Microsoft的ORM框架,随着 Entity Framework 不断的完善强化已经到达了EF 6.0+ 还是非常的完善的,目前使用的比例相对于其他OR ...

  3. JavaSE中Map框架学习笔记

    前言:最近几天都在生病,退烧之后身体虚弱.头疼.在床上躺了几天,什么事情都干不了.接下来这段时间,要好好加快进度才好. 前面用了三篇文章的篇幅学习了Collection框架的相关内容,而Map框架相对 ...

  4. 使用apidoc根据JS文件生成接口文档

    1.安装nodejs.下载网址:http://www.nodejs.org: 2.安装apidoc.运行cmd,切换到nodejs的安装目录,在命令行输入: 1 npm install apidoc ...

  5. java三大框架介绍

    常听人提起三大框架,关于三大框架,做了如下了解: 三大框架:Struts+Hibernate+Spring java三大框架主要用来做WEN应用. Struts主要负责表示层的显示 Spring利用它 ...

  6. （转）Linux修改SSH登录欢迎语

    场景:感觉这样做挺个性的,做个记录! 1 Linux修改SSH的欢迎语 众所周知,Linux系统并没有像Windows一样自带远程桌面连接,虽然可以通过后期安装VNC之类的软件来弥补这个缺点,但用了L ...

  7. Redux源码分析之createStore

    接着前面的,我们继续,打开createStore.js, 直接看最后, createStore返回的就是一个带着5个方法的对象. return { dispatch, subscribe, getSt ...

  8. Mybatis-Generator生成Mapper文件中<if test="criteria.valid">的问题解答

    写在前面 <Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦> 由于开源了项目的缘故,很多使用了My Blog项目的朋友遇到问题也都会联系我去 ...

  9. CentOS Linux 新建oracle数据库实例并连接

    CentOS Linux 新建oracle数据库实例 安装好oracle之后,首先想到的那就是自己建一个库来看看效果喽. 创建的过程如下文章所说,http://blog.chinaunix.net/u ...

  10. java虚拟机详解

    注: 此篇文章可以算是读<深入理解Java虚拟机:JVM高级特性与最佳实践>一书后的笔记总结加上我个人的心得看法. 整体总结顺序沿用了书中顺序,但多处章节用自己的话或直白或扩展的进行了重新 ...