什么是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. ...
随机推荐
- linux 远程连接ssh提示 IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY解决
Linux ssh 远程登录到其他机器上时,有时会出现登不进去,并弹出如下类似提示的情况: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...
- P2542 [AHOI2005]航线规划 LCT维护双连通分量
\(\color{#0066ff}{ 题目描述 }\) 对Samuel星球的探险已经取得了非常巨大的成就,于是科学家们将目光投向了Samuel星球所在的星系--一个巨大的由千百万星球构成的Samuel ...
- P4013 数字梯形问题
\(\color{#0066ff}{题目描述}\) 给定一个由 \(n\) 行数字组成的数字梯形如下图所示. 梯形的第一行有 \(m\) 个数字.从梯形的顶部的 \(m\) 个数字开始,在每个数字处可 ...
- 2017第八届蓝桥杯决赛(C++ B组)4.发现环
描述 小明的实验室有N台电脑,编号1~N.原本这N台电脑之间有N-1条数据链接相连,恰好构成一个树形网络.在树形网络上,任意两台电脑之间有唯一的路径相连. 不过在最近一次维护网络时,管理员误操作使得某 ...
- Jenkins+Git+Maven+Nexus+Tomcat
https://www.jianshu.com/p/d24e64559440 https://blog.csdn.net/u013322876/article/details/72637854 htt ...
- window 使用频率最高的快捷键
window 使用频率最高的快捷键 一个电脑使用者不完全一切操作都靠鼠标 适当的快捷键 不但可以提高效率 而且还可以适当的装一下自己是大神啦啦啦 个人最常用的快捷键: Ctrl + c : 复制 C ...
- FileWriter 中午乱码
解决办法 BufferedWriter writer = new BufferedWriter (new OutputStreamWriter (new FileOutputStream (fil ...
- BZOJ 3083 遥远的国度 树链剖分+脑子
唉..又调了半天QWQ..为何读入挂了.....莫非读入是反着的????据ywy学长所言如是...OvO震惊 这啥骚题啊...还要换根...不过清明讲过...(然鹅我现在才做... 先随便选个点(比如 ...
- Educational Codeforces Round 11 B
Description Consider 2n rows of the seats in a bus. n rows of the seats on the left and n rows of th ...
- 制作网页logo
一.先把jpg.png.jpeg等图片通过在线ico图标制作软件变成.ico图片 在线制作ico图标工具: http://www.bitbug.net/ 二.在head里面添加如下代码 <lin ...