CSS Sprite雪碧图基础知识_雪碧图菜鸟攻略

一、CSS Sprite雪碧图使用场景浏览器通常很快就可以将文本显示出来,但图像往往会减慢页面的加载速度。这一现象在移动端尤为明显,为了解决这个问题,可以将多个图像拼合成单个背景图像(sprite),再通过CSS控制具体显示图像的哪一部分。CSS雪碧即CSS Sprite,也有称之为CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图

CSS Sprite雪碧图基础知识

一、CSS Sprite雪碧图使用场景

浏览器通常很快就可以将文本显示出来,但图像往往会减慢页面的加载速度。这一现象在移动端尤为明显,为了解决这个问题,可以将多个图像拼合成单个背景图像(sprite),再通过CSS控制具体显示图像的哪一部分。

CSS Sprite雪碧图基础知识_雪碧图菜鸟攻略

CSS雪碧即CSS Sprite,也有称之为CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上面,然后利用CSS北京定位来显示需要显示的图像部分。

CSS雪碧图使用场景

  • 是静态图片,不随着用户信息的变换而变化;
  • 小图片,图片容量比较小;(大图不建议拼成雪碧图)
  • 加载量大的图片;

 

二、CSS Sprite雪碧图实现原理和方式

CSS Sprite的基本原理是将网站中需要用到的图片整合到一张单独的图片中,从而减少网站的HTTP请求数量。该图片使用CSS background  和background-position  属性渲染,这就意味着标签变得更加的复杂了,图片是在CSS中定义而不是在HTML中使用图像<img>标签

注意:拼合背景图的小图(X,Y)坐标为负值。以图片左上角的顶点为原点坐标,

根本上来说,就是通过控制一个层可显示区域范围的大小,通过打开一个窗口,进行背景图的滑动。

雪碧图的实现方式:

1、PS自动拼图    。

2、使用 sprite 工具自动生成。

(CSS sprite自动生成工具 —— CssGaga 是windows环境下快速生成雪碧图的工具,并且可以返回每个小图片的position代码 https://www.99css.com/cssgaga/)

海计划公众号
(0)
上一篇 2020/03/23 18:36
下一篇 2020/03/23 18:36

您可能感兴趣的内容