什么叫做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,好好学习,天天向上

版权属于:染念
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
更新于: 2020年08月12日 21:07
0


183 文章数
695 评论量
4 分类数
186 页面数
已在风雨中度过 7年246天6小时44分
目录
来自 《css sprites定位技术--原创》
© 2024 染念的笔记
浙ICP备19020194号-1
暗黑模式
暗黑模式
评论
返回顶部
© 2024 染念的笔记
浙ICP备19020194号-1
暗黑模式
暗黑模式
评论
返回顶部