CSS Sprites (CSS图像拼合技术)教程工具
作者：暴风彬彬 来源：bingo929.com 发布时间：2009-05-26 15:30:00
什么是CSS Sprites？
“Sprite”（精灵）这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要 同时保持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。
Sprite被定位到一副静态图片上，并且通过简单的程序或硬件即可正确定位到画面上，一幅幅图片就像是被“变”出来的，他们并没有单独占用内存，所以被取名为“Sprite精灵”。
上图是口袋妖怪的组合图片，可以点这里欣赏更多。不是加载每个但以图片
时间进行到2000年，Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生，它基于同上文提到的游戏Sprite同样的原理，并且使用CSS更容易控制，很快的流行开来。
2004年，Dave Shea 提出了一种使用CSS控制组合图片的方案 ，将许过小的图片组合在一起，使用css定义背景属性，来控制图片的显示位置和方式。
当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
CSS Sprites用在哪里？
CSS Sprites可以用在很多场合，大型网站可以将许多单独的图片，以有机的方式组合起来，从而使其便于维护和更新。图片之间通常会留出较大的空白，使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约。所以，你需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目 的方式。
0
投稿猜你喜欢
- 一、安装pip install pandas如果出报错，不能运行，可以安装pip install xlrd二、 代码如下import pan
- /*********************************** 作者：trieagle(让你望见影子的墙） 日期：2009.8.1
本文实例为大家分享了python实现在线翻译的具体代码，供大家参考，具体内容如下具体效果请看图代码：import urllib.reques- 用Dreamweaver制作网页时，如果插入的图片、GIF动画、声音、视频或链接的网页是用中文命名的，在用IE浏览器浏览时可能显示不出来。以
- 为了区分选择与未选择区域,，将已选择区域的文本背景色设置为浅蓝色是个很做法。设置的路径在 Editor > Color Scheme
- 在SQL Server数据库中如何查看一个登录名(login)的具体权限呢，如果使用SSMS的UI界面查看登录名的具体权限的话，用户数据库非
- 今天有这样得一个需求，如果登陆人是客服的话，会查询订单是'该客服'以及还没有匹配客服的，刚开始想的是直接在sql语句上拼写&
- 1) 创建配置文件和帐户 （创建一个配置文件和配置数据库邮件向导，用以访问配置数据库邮件管理节点中的数据库邮件节点及其上下文菜单中使用的帐户
- Python：2.7 IDE：Pycharm5.0.3 今天遇到一个问题，就是在使用json.load()时，中文字符被转化为Unicode
- 本文实例讲述了php查询whois信息的方法。分享给大家供大家参考。具体如下：这里使用php通过查询whois信息的网站列表进行查询func
- 我大概思考了下有如下几种方法可以解决: 1.在图片服务器上开通FTP,人为添加图片地址即可,但不方便,特别是在可视编辑器中看图还的多一部操作
- 前言这几天比较空闲，就接触了下百度地图的API(开发者中心链接地址：http://developer.baidu.com)，发现调用还是挺方
- pandas读取txt文件读取txt文件需要确定txt文件是否符合基本的格式，也就是是否存在\t,,,等特殊的分隔符一般txt文件长成这个样
- 引言今天我们来分享一个 Python 领域的神级第三方库 -- pycallgraph，通过该库并结合 graphviz 工具，就可以非常方
- 字符串打印打印函数echo: 打印值,用于单值print_r(): 人类可读方式打印,用于数组var_dump()：打印结构和类型，一般用于
- 一、项目需求爬取排行榜小说的作者，书名，分类以及完结或连载二、项目分析目标url：“https://www.qidian.com/rank/
- 解决方案function mergeImgs(list) { const imgDom = document.createElement(&
- 先来看看基本的定义：channel是Go语言中的一个核心类型，可以把它看成管道。并发核心单元通过它就可以发送或者接收数据进行通讯，这在一定程
- 原先的ctrl+alt+L容易和各种软件的快捷键冲突在setting——keymap——右边搜索栏搜索Reformat Code就会出现该设
- 一、闭包闭包相当于函数中，嵌套另一个函数，并返回。代码如下：def func(name): # 定义外层函数 def inner
