CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来实现背景图片的定位技术。
二、图片整合的优势：
1）通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。
2）通过整合图片来减小图片的体积。
2、CSS Sprites的实现方法
3、图片整合原则
1）边切图边整合。
2）定位时避免使用bottom,right等，用具体的数值，为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。
3）将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。
4）单张整合好的sprite图片在100KB以内。
5）按分类整合图片。
6）为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍。
（1）滑动门技术
1.什么是滑动门
滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果
2.滑动门特征：
通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性 。
CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图的更多相关文章
- CSS Spritec下载,精灵图，雪碧图，初探之原理、使用
CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...
- gulp-css-spriter 将css代码中的切片图片合并成雪碧图
NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'), ...
- css背景雪碧图等
1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...
- 【HTML+CSS】(2)CSS Sprite雪碧图
1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...
- 7：CSS Sprites的原理（图片整合技术）
7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...
- css sprites的原理和作用
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
- CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- CSS Sprites ——雪碧图的使用方法
首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...
- !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
随机推荐
- JAVA本地TXT文件解决中文乱码问题
import java.io.*; public class ReadFile { public static void main(String[] args) { try { File file = ...
- Hive(六)hive执行过程实例分析与hive优化策略
一.Hive 执行过程实例分析 1.join 对于 join 操作:SELECT pv.pageid, u.age FROM page_view pv JOIN user u ON (pv.useri ...
- 用dom4j修改xml（增加修改节点）
用dom4j修改xml(增加修改节点) 博客分类: Java XMLJavaMyeclipseServlet 使用dom4j修改解析xml,xml文件的位置是配置在xml.properties文件中 ...
- C/C++中如何计算程序运行的时间
一个程序的功能通常有很多种方法来实现,怎么样的程序才算得上最优呢?举个例子,如果实现同一个功能的两个程序,一个一点按钮就给出运行结果,而另一个则需要漫长的时间去等待,就像安装WINDOWS XP一样( ...
- Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) A 水 B stl C stl D 暴力 E 树状数组
A. Unimodal Array time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- CDOJ--1550&&1731
原题链接:http://acm.uestc.edu.cn/problems.php?vol=15 分析:首先筛出sqrt(2^31-1)以内的素数,对于给定的区间[L,R],仍然用筛素数的思想把那些是 ...
- 题解【luogu2045 方格取数游戏加强版】
Description 给出一个 \(n*n\) 的矩阵,每一格有一个非负整数 \(A_{i,j}\) ,(\(A_{i,j} <= 1000\))现在从 \((1,1)\) 出发,可以往右或者 ...
- 即时通信系统Openfire分析之一：Openfire与XMPP协议
引言 目前互联网产品使用的即时通信协议有这几种:即时信息和空间协议(IMPP).空间和即时信息协议(PRIM).针对即时通讯和空间平衡扩充的进程开始协议SIP(SIMPLE)以及XMPP.PRIM与 ...
- Oracle用imp导入dmp文件记录一下
---------------------------------------------------------------------------------------------------- ...
- Laravel是怎么实现autoload的？
用了一阵Laravel后发现很少有include和require,觉得有点奇怪,思考Laravel是怎么完成文件导入的. 其实Laravel依旧还是用include或者require的,只是都写在一个 ...