今天重点学习了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. Oracle锁表处理操作笔记

    --查看锁表进程SQL语句1: SELECT sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, ...

  2. C# 汉语转拼音

    汉语转拼音或首字母 通常不少网站上有汉语转拼音功能,今天就小记下这段汉语转拼音的代码,自己测试ok,现把代码贴出来,以备日后使用: 效果 用法很简单后台使用到了两个类文件,一个是:ConvertHzT ...

  3. AllPairs运用遇到的问题及解决办法分享

    前些天用AllPairs自动生成了交互式测试用例,中间遇到的问题困扰了一天,最后解决了.现在分享下解决过程 首先,D\AllPairs是我的ALLPairs安装目录,C盘桌面test.txt是我写的测 ...

  4. .net 自动摘要等算法 HanLP.net

    参考资料: http://www.hankcs.com/nlp/call-hanlp-in-csharp.html 目前自动摘要算法似乎没有.net 版本,而以java,python 居多 自动摘要算 ...

  5. SVN的目录管理规范

    Subversion有一个很标准的目录结构,是这样的.比如项目是proj,svn地址为svn://proj/,那么标准的svn布局是 svn://proj/   |   +-trunk   +-bra ...

  6. jmeter 接口重放（投票活动）

    目的 这几天公司弄了个投票的活动,召集大家一起投票.自己比较懒,就想这个投票是不是可以直接抓包进行重放通过jmeter集成到jenkins里面去每天来跑.试了下成功了,这里把对应的方案抛出来. 第一步 ...

  7. 快速了解cpu、核与线程

    作为一个后台开发人员,我想有必要了解这些基础知识.如果本文有不严谨或者疏忽的地方,请指正. cpu与核心 物理核 物理核数量=cpu数(机子上装的cpu的数量)*每个cpu的核心数 虚拟核 所谓的4核 ...

  8. java加减的二进制实现

    Java中整数基本类型有byte,short,int,long,大小分别为1.2.4.8个字节,一个字节大小为8位,也就是8个二进制码(0/1)组成. 计算机中二进制码分为原码,反码,补码.在计算机中 ...

  9. aspcms多图调用以及错误提示:3704

    1.“为师资介绍”(相册列表)建立了内容页(相册内容页), 需要对模板页面改造,在相册详细页调用多图,之前没有试过,这次利用: 实现多图调用,注意不能使用contentid=[content:id]  ...

  10. Charles录制App的接口har文件

    Charles录制App的接口har文件 如果我们想录制我们自己App后台请求接口的信息,并生成har文件,要怎么做呢?其实很简单,就是通过Charles,让手机的访问请求走这个Charles代理就行 ...