1. [代码][CSS]代码

　CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。　　加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。
 
　CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
 
下面我就详细的讲解下他的使用技巧，包你现在不懂的童鞋会有个清楚的全新了解，虽然目前有这样的工具，但是还是要先清楚他的原理，技巧性的来做也会很快速的完成定位，下面我分享加个案例。
 
首先跟大家说明一点，由于需要定位的背景都是合并在一张图的，所以都是一刀切的，要么是X轴坐标一致要么是Y轴坐标一致，也就有了我下面要讲述的2种类型了。
 
1。横向定位坐标
 
横向定位坐标意思就是Y轴坐标固定,它的特点就是每个图标的高度是一致的，通过改变x坐标的位置来改变背景。只需测量每个图标的宽度就可以知道x轴的坐标了。如果你还不知道这个规律，下面我就讲解给你听吧，下面拿我做的2个案例来说事。
 
效果图：
 
http://m1.img.libdd.com/farm5/2012/0828/08/1F97A4B232E0D41ECD68D52EBE037A9555BBCB189977_500_22.jpg
 
 
实际背景图：
http://m1.img.libdd.com/farm5/2012/0828/08/A2E67666F292DF6649411ED2851CEFE87EDCFC5EF698_404_46.JPEG
 
 
 
那么具体来讲解怎么来定位，这里是改变X坐标来定位。
 
由于高度都是一样所以Y轴上的坐标都是0或top
 
这里每个图标我是用一个span做背景的，下面具体分析下代码：
 
<div class="join c">
            <strong>Join us on:</strong>
            <ul class="c">
                <li><a href="https://www.facebook.com/Fancyladies"><span class="sl">Facebook</span><span class="sharelogo facebookLogo"></span></a></li>
                <li><a href="http://pinterest.com/fancyladies/ "><span class="sl">Pinterest</span><span class="sharelogo pinterestLogo"></span></a></li>
                <li><a href="https://twitter.com/fancyladiescorp"><span class="sl">Twitter</span><span class="sharelogo twitterLogo"></span></a></li>
                <li><a href="http://www.flickr.com/photos/fancyladies"><span class="sl">flickr</span><span  class="sharelogo flickrLogo"></span></a></li>
                <li><a href="http://www.youtube.com/user/fancyladiescom"><span class="sl">Youtube</span><span class="sharelogo youtubeLogo"></span></a></li>
                <li><a href="http://www.fancyladies.com/blog/"><span class="sl">Blog</span><span class="sharelogo blogLogo"></span></a></li>
            </ul>
        </div>
下面是Css  code:
 
.sharelogo{display:inline-block;*display:inline;*zoom:1;height:46px;background-image:url(../images/shareIcon.jpg);background-repeat:none;}
 
.facebookLogo{background-position:0 0;width:20px;}
 
.pinterestLogo{background-position:-20px 0;width:42px;}
 
.twitterLogo{background-position:-62px 0;width:30px;}/**/
 
.flickrLogo{background-position:-92px 0;width:130px;}
 
.youtubeLogo{background-position:-222px 0;width:98px}
 
.blogLogo{background-position:-320px 0;width:84px;}
 
.sl{float:left;padding-right:10px;}
 
他们的背景图片都是公用这一张背景：background-image:url(../images/shareIcon.jpg);
 
每个元素的背景都不允许重复：即：background-repeat:no-repeat;
 
读到这里你有发现一个规律，就是每个元素的坐标等于前面元素的坐标值加上宽度。即元素的横向坐标值公式等于。相邻元素的坐标值加上宽度。
 
pinterestLogo 的值等于facebookLogo的坐标值20px+facebookLogo的宽度20px ;是不是很简单啊，只要你知道元素的宽度就可以，因为横向坐标等必须要给个固定的宽度，所以这一步测量宽度不是浪费时间。希望仔细看源码中坐标值的规律。word艺术字：​http://www.huiyi8.com/yishuzi/

不管是横向定位与纵向定位坐标的时候，他们的起始位置都是background-position:0  0;而横向定位的时候高度是固定的，所以每次只需改变X坐标的值就实现了。

比如facebook的logo是起始位置的图标，所以它的坐标值是0,0，就实现了它的定位。
 
那么pinterest的logo是它的下面一个，就是从facebook的宽度负值算起。由于facebook的宽度是21px;所以pinterest的logo坐标就是background-position:-20px 0; 下面以此类推
 
twitterLogo 是pinterstLogo的下面一个，那么就是用pinterstLogo的坐标值加上pinterstlogo
 
的宽度,就得到了twitterLogo的坐标位置了。就是-（20px+42px）=-62px;即twitterLogo 的坐标值为.twitterLogo{background-position:-62px 0;width:30px;}
 
读到这里你有发现一个规律，就是每个相邻元素的坐标等于前面元素的坐标值加上它前面元素的宽度。即元素的横向坐标值公司等于。相邻元素的坐标值加上它的宽度。好了下面讲第二种方案了。
 
2.纵向定位坐标
 
纵向定位坐标就是X轴坐标固定，改变Y轴坐标值来实现背景的改变，他们的宽度是固定的，所以他们的X轴坐标始终都是相同的，即0或left。下面我分享个案例
 
效果图：
 
http://m3.img.libdd.com/farm5/2012/0828/21/2F59B3DC34AD60610C0CC7BDE87645D4C4799F5EF698_81_255.JPEG
 
 
实际背景图片：
http://m1.img.libdd.com/farm5/2012/0828/21/641A797EC6A263EAE69FE1A6D81BB0945AEB839BE40C_32_148.JPEG
 
Css code:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{margin:0;padding:0;float:left;width:32px;}
ul li{float:left;list-style-type:none;width:32px;background-image:url(image/bg.jpg);background-repeat:none;margin:10px 0;}
.f{background-position:0 0;height:32px;}
.p{background-position:0 -32px;height:20px}/*Y轴坐标等于起始位置的高度 即：-（0+32）*/
.fr{background-position:0 -52px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度,即：-（32+20） */
.h{background-position:0 -84px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度*即：-（52+32）*/
.t{background-position:0 -116px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度，即：-（84+32）*/
</style>
</head>
                                                                                           
<body>
<ul>
                                                                                           
<li class="f"></li>
<li class="p"></li>
<li class="fr"></li>
<li class="h"></li>
<li class="t"></li>
</ul>
</body>
</html>
3.宽度和高度都相等的时候，那是最好不过了，直接做乘法，相信你的数学能力一家过了小学3年级了，Ok，还是来分享下吧。
 
1.宽度高度想等的情况下等位X轴坐标，这种情况通常都出现在一组按钮下，鼠标滑过和点击时候的背景改变。这种情况我也总结出来了，有公式：
 
X轴坐标=-n（起始位置+宽度）.
 
其中n值从0开始。即所有的起始位置的坐标都是0,0开始起。下面依次类推。
 
比如你现在所要定位的元素是第3个，假设我们这里的图标的宽度为30px.那么他的X轴坐标就等于。x=-3*(0+30px);
 
Y轴的坐标=-n(起始位置+高度)
 
比如你现在所要定位的图标为第6个位置，假设这里的高度也是32px;那么他的Y轴坐标就是
 
Y=-6（0+32px）=-192px.   哈哈，当然有许多的工具，那个叫什么gaga的工具虽然挺好，但是我没用过，我一直都用我自己的这套，我自己在实践中感觉挺方便的，所要分享下。

css sprite技巧详解的更多相关文章

  1. 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解

    前端html.CSS快速编写代码插件-Emmet使用方法技巧详解   Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...

  2. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  3. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  4. [转]CSS vertical-align属性详解 作者：黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  5. 3dmax联机分布式渲染方法技巧详解

      3dmax联机分布式渲染方法技巧详解 \测试环境:win7系统 3DMAX2009 Vray2.0 .首先要保证你的两台电脑能在局域网里互相访问如图: 其他电脑上也一样都能打开对方的电脑! 步! ...

  6. 训练技巧详解【含有部分代码】Bag of Tricks for Image Classification with Convolutional Neural Networks

    训练技巧详解[含有部分代码]Bag of Tricks for Image Classification with Convolutional Neural Networks 置顶 2018-12-1 ...

  7. MySQL SQL查询优化技巧详解

    MySQL SQL查询优化技巧详解 本文总结了30个mysql千万级大数据SQL查询优化技巧,特别适合大数据里的MYSQL使用. 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 ...

  8. CSS绝对定位absolute详解

    转:https://www.jianshu.com/p/a3da5e27d22b     之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...

  9. css文本格式详解

    一.css文本主体内容: 二.css文本详解:  1.文本缩进 语法: text-indent:<length>|<percentage> 默认值为0. 属性值详解: < ...

随机推荐

  1. gulp配置，实例演示

    项目完成后的目录 我们所需要的插件为:gulp-minify-css gulp-concat gulp-uglify gulp-rename del 如下图所示,完成后的项目目录结构: 附加,获取pa ...

  2. Word 操作

    1.出文件,最后一页是附件.最后一页的页码不想要.如何删除?用的是 office word 2010版本,跟07 03版本界面不一样. 在最后一页的最前面插入分节符:下一页 ,编辑页脚.让页脚“取消链 ...

  3. UIview层次管理

    将一个UIView显示在最前面只需要调用其父视图的 bringSubviewToFront()方法. 将一个UIView层推送到背后只需要调用其父视图的 sendSubviewToBack()方法.

  4. Idea中优化Markdown Support显示效果

    转自:https://www.jianshu.com/p/d093c42a8c29 因为工作中为提高工作效率,我一般习惯于直接在`idea`中使用`markdow support`插件来进行相关文档的 ...

  5. [转]maven2中snapshot快照库和release发布库的应用

    [转载声明] 转载时必须标注:本文来源于铁木箱子的博客http://www.mzone.cc [原文地址] 原文永久地址是:http://www.mzone.cc/article/279.html 在 ...

  6. EasyPlayer.js H5播放器帮助我这种不会前端的普通用户也能轻松实现直播接入

    说到EasyPlayer.js,先得说一下EasyPlayer到底是啥, An elegant, simple, fast android RTSP/RTMP/HLS/HTTP Player.Easy ...

  7. Jaxb2 实现JavaBean与xml互转

    一.简介 JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生Java类的技术.该过程中,JAXB也提供了将XML实 ...

  8. dubbo开发中使用到的一些服务配置方式

    通过之前的学习了解了dubbo的常规的使用,下面我们看看特殊情况或者说真实环境下使用dubbo的一些配置实例. 一.一个接口有多个实现时可以使用group来区分 1.服务提供者配置 <?xml  ...

  9. 电路分析三------KCL，KVL，VCR方程

    1.2b方程 2.举例 举例2

  10. TRansportation ANalysis and SIMulation System

    https://www.fhwa.dot.gov/planning/tmip/transims/background.cfm?from=groupmessage