web前端基础仏学习css精灵css sprite技术解析

说到css sprite技术第一次接触还是在百度站长工具中网站检测时看到到，说这个技术可以减少网站图片请求次数，当时还不是很理解，之后了解了一番，明白了其中的原理，故在此给大家分享一下。

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

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

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

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

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

实际背景图：

那么具体来讲解怎么来定位，这里是改变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;}读到这里你有发现一个规律，就是每个相邻元素的坐标等于前面元素的坐标值加上它前面元素的宽度。即元素的横向坐标值公司等于。相邻元素的坐标值加上它的宽度。好了下面讲第二种方案了。

实际背景图片：

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文件。

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

web前端基础仏学习css精灵css sprite技术解析相关推荐

前端基础入门学习线路之CSS渐变色效果的实现方法
通过CSS border-radius,我向大家展示了如何实现方形元素的圆角效果,这解决了以前美工画出这种效果而开发人员无法实现的问题.CSS渐变色(Gradients)也是一个类似的技术.现在火狐, ...
Web前端基础回顾（HTML、CSS）
目录 Web开发 HTML 常用标签介绍表单 CSS 样式及选择器分类标签分类及嵌套尺寸及颜色表示盒模型布局方式背景属性 CSS文本属性 Web开发网页,交由浏览器运行的程序组成:HT ...
Web前端基础（八）：CSS模块开发细则
设计普通模块流程? 选择标签--布局样式--文本样式--代码优化一.空隙问题多个行元素并排显示,默认状态下,行元素之间会存在间隙,这个间隙由HTML文件中的空格引起,解决方案是给行元素设置浮动. ...
web前端开发怎么样学习？看这份web前端学习路线
前端开发是创建Web页面或app等前端界面呈现给用户的过程.前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的用户界面交互.它从网页制作演变而 ...
前端开发需要学习什么？掌握哪些技术？
前端开发需要学习什么?随着计算机行业的不断发展,无论是在企业还是个人中,web前端技术都得到广泛的使用.web前端开发师是一个非常新兴的职业,在计算机行业中,web前端得到很大的重视.那么在学习web ...
HTML及CSS基础入门：web前端基础，看这一篇就够了
写在开头:这是一篇有关于HTTP和CSS的基础入门教程.你也可以将他当作一本字典,因为我将所有可能用到的语法结构全部设置了标题,你只需要点击标题即可跳转过去.同时,我在最后放置了两个CSS实战,以供读 ...
WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
web前端基础与CSS入门
web前端基础 1.嵌套列表注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...

web前端基础仏学习css精灵css sprite技术解析

web前端基础仏学习css精灵css sprite技术解析相关推荐

最新文章

热门文章