文章40
标签5
分类5

css sprites定位技术--染念原创o

什么叫做css sprites呢?

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
在网页访问中,客户端每需要访问一张图片都会向服务器发送请求,所以,访问的图片数量越多,请求次数也就越多,造成延迟的可能性也就越大。
所以,CSS Sprites技术加速的关键,并不是降低质量,而是减少个数,当然随之而来的增加内存消耗,CSS Sprites图片繁琐的合成等缺点在网站性能的提升前,也就不足为道了。

华丽丽的分割线

首先,如果想知道如何获取图片坐标的话,这里就不bb了,也不想原创写如何获取了,太麻烦了,而且有现成的,讲得很好,我也不想复制下来。哔哔哔哔哔

接下来是原创内容。。

 

看了获取之后的教程,你可能有疑惑?

有时候失效呢?

引用整个图片时候,no——repeat没有写哦


background: url(00.png) no-repeat;

为什么css定位x,y轴是负值

可以这么理解:假如我们手头有图片,里面小图标(这边简单点,只是个x轴移动)

这样,我们想获取第一个图标的话,很简单就是background-position:0 0;

但是如果想获取第二个图标的话,如果是background-position:20px 0,那么图标就会不见,如果是-20px的话图片才出现

那是因为我们使用这个css是让图片本身发生移动,而不是坐标轴(之前一直以为坐标轴动,不好理解)我们如果写20px,那么图片就会向右远离原点20px,而坐标原点就是该整个图片的左上角,没有变化

如果是-20px ,就相当于把图片向左移动了20px,说点简单的,那么就是,第二个图标将会取代第一个图标的位置

最后需要再规定大小,图标就独立出来了~

 

yeah,好好学习,天天向上

 

0 评论

评论已关闭