什么是css sprites,如何使用?
css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片、背景图是否重复、背景图定位),显示图片,减轻服务器对图片的请求数量
优点:
1、减少网页的HTTP请求,提高页面性能
2、图片命名上的困扰
3、更换风格方便
缺点:
1、必须限定容器大小,符合背景图片元素的位置,需要计算
2、维护比较麻烦
使用步骤:
1、制作一张具有多状态的拼合图片,需要按照一定规律处理
2、给要显示背景的盒(一个固定尺寸,宽width、高height),以背景的方式加载,让其局部显示
3、通过背景图定位(background-position)控制不同的显示状态
什么是css sprites,如何使用?的更多相关文章
- CSS Sprites优缺点
利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因: CSS Sprites能减少图片的字节, ...
- 神奇的CSS sprites,制作特效的新方法
本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- Css Sprites 多张图片整合在一张图片上
CSS Sprites原理: CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backgro ...
- CSS Sprites+CSS3 Icon Font
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
- 使用CSS sprites减少HTTP请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...
- CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...
- 【转】CSS Sprites教程大全(使用方法、工具介绍)
什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“backgrou ...
- css sprites介绍
一.CSS Sprites简介 通常被意译为“CSS图像拼合”或“CSS贴图定位”.CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,CSS Sprites并不是什么金科玉 ...
- dataURI V.S. CSS Sprites 移动端
英文原文:http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/ 中文翻译:http://www. ...
随机推荐
- Cardinality (基数)
名词 Cardinality: 优化器在计算成本的时候,需要从统计信息中取得数据,然后去估计每一步操作所涉及的行数,叫做Cardinality. 比如,一张表T有1000行数据,列COL1 ...
- 关于thinkphp5中数据库分组查询group
在使用tp5的group进行分组查询总是报错,以主键进行分组是不报错,但没有任何意义 与聚合函数一起使用的不会报错,如官方文档给出的代码 Db::table('think_user') ->fi ...
- python 分页 封装
分页 封装 我是在项目根目录创建个分页文件 分页代码: class Pagination(object): def __init__(self, data_num, current_page, url ...
- 51Nod - 1242 斐波那契(快速幂)
斐波那契数列的定义如下: F(0) = 0 F(1) = 1 F(n) = F(n - 1) + F(n - 2) (n >= 2) (1, 1, 2, 3, 5, 8, 13, 21, ...
- Git for Linux and Windows
1.在liunx中安装 1.1yum安装 [root@node1 ~]# yum install git –y [root@node1 ~]# git version git version 1.8. ...
- 回滚revert和reset区别
分享请标明来自: https://www.css3.io/hui-gun.html 背景 git是一个庞大的工具,我们要开始扫盲一些常用的命令.回滚代码在项目中必然会遇到,下面我们介绍在git中如何回 ...
- flink日记
直接下载 解压, 运行 ./bin/start-cluster.sh 几个概念: 批处理: 大数据量,不要求实时. 输入源是有界的 流处理:实时要求高,通常在毫秒级, 数据量比较小,但是输入源是无界的 ...
- mysql隔离级别与锁,接口并发响应速度的关系(1)
默认隔离级别:可重复读 原始数据 | id | name | addr | | nick | NULL | 事务1 事务2 start transaction start transaction ; ...
- Juniper SRX550防火墙web页面CPU达到100%的故障解决办法
Juniper SRX550防火墙web页面CPU达到100%的故障解决办法 利用telnet远程连接主机,对web页面注销重新登录即可,在配置中输入命令:run restart web-manage ...
- my07_lock-tables与single-transaction的区别
概念描述 ************************************************************ mysqldump进行逻辑备份时(innodb),为保证事务的一致性 ...