什么是css sprites？

1.背景介绍

当在浏览器里输入一个URL地址的时候，你会感觉无数张图片“唰唰唰”的闪出来了。在这个过程中，浏览器会把这个网站的主资源（就是Html文件）拉取回来，然后开始分析网页中的Js，Img之类的标签，然后再去拉取这些图片和资源，这些后拉取的资源称为「子资源」。

对于浏览器来说，他们的请求方式都是发起一个Http请求，经历三次握手，并把文件拉取回来，一般的浏览器内核只能同时并发4，5个网络请求，所以大量的小图片特别影响性能，不但网页加载完成时间慢，还可能影响一些重要的JS逻辑，使得网页响应也变慢，卡死等等，对于浏览器来说，发起一个Http请求，来回几百毫秒的耗时，已经是相当高的资源耗费。然后很多人就想到了一种办法，把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置，这样可以将原本需要多张图像文件分别显示，整并为单一图像文件的分区显示技术，借由减少下载图像文件数量，提高网页的显示性能。

2.知识剖析

（1）使用雪碧图的优点：

1）利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2）CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

（2）使用雪碧图的缺点

1）在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。

2）至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。

3）由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

（3）如何制作雪碧图：

photoshop

雪碧图制作软件

在线制作网站

（4）应用到网页

好了，我们做好需要使用的雪碧图，现在需要将这个图应用到我们的网页中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。根据雪碧图中图标的具体像素大小，再规定元素的具体大小，然后使用background-position找到图标的位置。元素大小相当于相机机头，background-position相当于移动相机找到我们需要的景物，下面给大家简单的演示一下。

3.常见问题

为什么给雪碧图的backgroup-position的值是负值?

4.解决方案

首先我语法们来看一下backgroup-position的语法：

background-position：x, y;

定义：背景图片相对容器原点的起始位置；

取值：

百分比：百分数

具体值：px、rem、em等确值

默认值为：0% 0%（即坐标原点）

容器：background作用的元素，即其视口，超出该容器的部分，将被隐藏。，以容器的起始点作为原点（0，0）绘制背景图片的起始位置坐标轴。

background-position将定义背景图片起始于坐标轴的哪个位置，浏览器将其他部分隐藏，仅显示容器内的背景内容。

设置background-position: -50px -50px，背景图的起始点位于（-50px, -50px）；

由此，显示的背景是被截断后的容器内的图片内容，其他象限遮罩部分图片不可见。

总结：background-position为背景图的起始点，可相对整个坐标轴进行定位，且仅容器内的背景图内容可见

什么是css sprites？相关推荐

css 在线生成器,CSS Sprites在线生成器
一款优秀的主题,不仅仅需要美观的设计,还需要最大的各项优化,最大可能地优化主题中用到的图片,也就变得十分重要,使用CSS Sprites技术是比较常见的手段,很多优秀的主题都很注重这一点.跟版模板网在 ...
CSS Sprites (转)
CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的详细阐述 .原先只在CSS玩家之间作为一种制作方法流传,后来出来 ...
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
CSS sprites
CSS Sprites 1.简介 CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的"back ...
CSS Sprites （CSS精灵）
CSS Sprites原理CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backgroun ...
CSS Sprites图片拼合生成器实现思路
在对WEB前端做性能优化时,为了有效减少http请求数,通常会把Web用到的图片合并成一张大图,采用CSS的background-position 属性,控制页面的图片显示. 问题是,目前虽然有这么一 ...
CSS Sprites图片合并
CSS Sprites的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度. 实现方法: 首先将小图片整合到一张大的图片上然后根据具体图标在大图上的位置,给背景定位. .icons{ ...
使用CSS sprites减少HTTP请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...
每日一个css效果之css sprites
为什么要是用css sprites CSS Sprites are the preferred method for reducing the number of image requests. Co ...
html css精灵,谈谈CSS Sprites(css精灵)
CSS Sprites在国内很多人叫css精灵,其实这个技术不新鲜,这个技术老到什么程度呢,我不敢确定,但是我看到最早的关于CSS Sprites是在Dave Shea的<CSS Sprites ...

什么是css sprites？

什么是css sprites？相关推荐

最新文章

热门文章