1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

css sprite技术解析

作者:用户 来源:互联网 时间:2016-08-03 10:50:18

图片坐标定位元素px坐标定位宽度拼合生成器元素坐标

css sprite技术解析 - 摘要: 本文讲的是css sprite技术解析,   说到css sprite技术第一次接触还是在百度站长工具中网站检测时看到到,说这个技术可以减少网站图片请求次数,当时还不是很理解,之后了解了一番,明白

  说到css sprite技术第一次接触还是在百度站长工具中网站检测时看到到,说这个技术可以减少网站图片请求次数,当时还不是很理解,之后了解了一番,明白了其中的原理,故在此给大家分享一下。
  
 CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。  加速的关键,不是降低重量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。

 CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
下面我就详细的讲解下他的使用技巧,包你现在不懂的童鞋会有个清楚的全新了解,虽然目前有这样的工具,但是还是要先清楚他的原理,技巧性的来做也会很快速的完成定位,下面我分享加个案例。

首先跟大家说明一点,由于需要定位的背景都是合并在一张图的,所以都是一刀切的,要么是X轴坐标一致要么是Y轴坐标一致,也就有了我下面要讲述的2种类型了。

1。横向定位坐标
横向定位坐标意思就是Y轴坐标固定,它的特点就是每个图标的高度是一致的,通过改变x坐标的位置来改变背景。只需测量每个图标的宽度就可以知道x轴的坐标了。如果你还不知道这个规律,下面我就讲解给你听吧,下面拿我做的2个案例来说事。
效果图:

css sprite技术解析-css sprite技术

实际背景图:
css sprite技术解析-css sprite

那么具体来讲解怎么来定位,这里是改变X坐标来定位。

由于高度都是一样所以Y轴上的坐标都是0或top
这里每个图标我是用一个span做背景的,下面具体分析下代码:
下面是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 ;是不是很简单啊,只要你知道元素的宽度就可以,因为横向坐标等必须要给个固定的宽度,所以这一步测量宽度不是浪费时间。希望仔细看源码中坐标值的规律。
不管是横向定位与纵向定位坐标的时候,他们的起始位置都是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;}读到这里你有发现一个规律,就是每个相邻元素的坐标等于前面元素的坐标值加上它前面元素的宽度。即元素的横向坐标值公司等于。相邻元素的坐标值加上它的宽度。好了下面讲第二种方案了。

css sprite技术解析-css sprite 在线工具
实际背景图片:

css sprite技术解析-css sprite是什么

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)*/


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.  

到此,大家应该也明白CSS Sprite是一项什么技术,以及如何运用了。
最后送一点福利给大家, CSS 图片拼合生成器

CSS 图片拼合生成器(英文名为css sprite generator),是一款支持多语言的免费CSS图片拼合生成器,目前支持18种语言(包括简体中文)。该在线工具非常易用,你只需要上传你需要拼合的CSS图片压缩包,设置重复图片处理办法,调整原图大小,拼合图片输出设置参数,CSS输出选项即可生成CSS拼合图片和CSS文件。

css sprite generator是前端设计师高效率的在线工具首选。

css sprite generator官方网站:spritegen.website-performance.org

学习前端重在分享,希望大家把好的文章相互分享,共同学习,共同进步!

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索图片 , 坐标 , 定位 , 元素 , px , 坐标定位 , 宽度 , 拼合生成器 元素坐标 css sprite技术、css sprite、css sprite 在线工具、css sprite是什么、gulp css sprite,以便于您获取更多的相关知识。

logo-近来发现了一个关于网站小图标的问题

...图片包括了所有的logo如下http://cm.qzonestyle.gtimg.cn/aoi/skin/sprite/1.32-ocu150204190306.png 3.这个是如何实现的?在网页上 4.这个可以在android上实现吗? 解决方案 使用的是clip属性,裁剪一张大图得到一张小图 ...

css background设置背景图片技巧及Sprite的应用

...试更改background各个属性来了解和掌握关于css background CSS Sprite的应用 什么是CSS Sprite ? 不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON,栏目背景啊,图片按钮啊等都...

CSS Sprite技术

...ww.imagemagick.org/script/montage.php http://jaymz.eu/2010/05/building-css-sprites-with-bash-imagemagick/   在线制作,把多张图打包上传 http://spritegen.website-performance.org/ http://css-sprit.es/  

compass与css sprite(雪碧图)

什么是css sprite。 css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像。 MDN相关链接: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites 优点:1....

CSS Sprites对CSS布局的意义及优缺点

    本文和大家重点讨论一下CSS Sprites对CSS布局的意义、优点和缺点,CSS Sprites技术早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述,这里和大家重新认识一下它的用法。     CSS Sprites对CSS布局的意义、优点...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备