CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

 

一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来实现背景图片的定位技术。

二、图片整合的优势：

1）通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。

2）通过整合图片来减小图片的体积。



 

2、CSS Sprites的实现方法


3、图片整合原则

1）边切图边整合。

2）定位时避免使用bottom,right等，用具体的数值，为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。

3）将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。

4）单张整合好的sprite图片在100KB以内。

5）按分类整合图片。

6）为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍。

快捷工具： Github地址 https://github.com/iwangx/sprite




（1）滑动门技术

1.什么是滑动门

滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果

2.滑动门特征：

通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性 。

案例地址：http://download.csdn.net/download/flqbestboy/9925828

 

 

 

CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图的更多相关文章

  1. CSS Spritec下载,精灵图，雪碧图，初探之原理、使用

    CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...

  2. gulp-css-spriter 将css代码中的切片图片合并成雪碧图

    NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'),     ...

  3. css背景雪碧图等

    1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...

  4. 【HTML+CSS】(2)CSS Sprite雪碧图

    1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...

  5. 7：CSS Sprites的原理（图片整合技术）

    7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...

  6. css sprites的原理和作用

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

  7. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  8. CSS Sprites ——雪碧图的使用方法

    首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...

  9. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

随机推荐

  1. 【bzoj2588】Count on a tree

    Portal -->bzoj2588 Solution 不行我一定要来挂这道题qwq很气愤qwq(其实还不是因为自己蠢..) 额首先说一下正解 如果这个问题放在序列上面的话..直接离散化一下然后 ...

  2. for循环中的i++和++i

    直接上代码............. #include <iostream> using namespace std; int main() { int i, k,l,p; k = 0; ...

  3. 用python的turtle画图

    画5个红色的同心圆代码如下: import turtle turtle.pencolor("red") # 设置画笔的颜色 turtle.pensize() # 设置画笔的宽度 t ...

  4. jinja2 中的 Template 批量替换json字符串中的内容

    项目中用到elasticsearch,使用Json格式查询方式,一个查询语句中有好几个地方需要替换,且替换的值都相同.最开始把json转为字符串发方式,利用format函数处理,发现再转回json时无 ...

  5. Unix处理目标文件的工具

  6. 嵌入式 视频编码（H264）hi3518

    这几天在编写视频录制模块,所以,闲暇之余,又粗粗的整理了一下,主要是API,以备不时之用    摄像头获取的模拟信号通过经芯片处理(我们使用的是CX25825),将模拟信号转成数字信号,产生标准的IT ...

  7. Spring.Net 入门学习（一）实现控制器翻转与依赖注入

    Spring.net IOC:Invasion of Control,控制器翻转,名字由英文翻译过来就是这个意思了,其实用通俗的话来说就是:将创建对象的职责交给控制器来做,这个控制器就是spring了 ...

  8. 怎样把一个DIV放到另一个div右下角

    怎样把一个DIV放到另一个div右下角??? 借助CSS定位来实现,你将右下角的那个DIV放在另一个DIV里面,参考代码如下示: <div id="box1"> < ...

  9. 2017 ACM Arabella Collegiate Programming Contest(solved 11/13)

    省选考前单挑做点ACM练练细节还是很不错的嘛- 福利:http://codeforces.com/gym/101350 先来放上惨不忍睹的virtual participate成绩(中间跑去食堂吃饭于 ...

  10. DHTML中window的使用

    window对象是对浏览器窗口进行操作的对象.以下列出一些常用的对象(三级为对象的方法.属性) |-navigator:是对浏览器信息进行操作的对象 |-history:包含用户浏览过的url信息 | ...