解密CSS Sprites：技巧、工具和教程
来源：Oncoding编码营 发布时间：2011-01-11 19:38:00
简介
CSS Sprites并没有一个确定的中文翻译，通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟。本文系统的介绍了CSS Sprites的概念、用途和用法，相信本文会解决你在使用CSS Sprites中遇到的大部分问题。
本文系统的介绍了CSS Sprites的概念、用途和用法，相信本文会解决你在使用CSS Sprites中遇到的大部分问题。
什么是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
投稿猜你喜欢
概况在开发过程中，我们一般直接用Python命令直接运行Flask程序。这样的运行只适合我们开发，方便我们调试。一旦程序部署到线上，这样运行- 本文实例讲述了Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法。分享给大家供大家参考，具体如下：#!/usr/bin
- 首先声明：本人虽然在web前端岗位干了好多年，但无奈岗位对技术要求不高。html,css用的比较多，JavaScript自己原创的很少，基本
- 在论坛上看到了用Python登录微信并实现自动签到，才了解到一个新的Python库： itchat库文档说明链接在这：
- 大家好，今天给大家带来一篇如何优化time.After函数。最近我在做调度中心2.0的重构。本次重构使用的GO语言开发。在项目中，基本都离不
- 目录1、字典的定义字典和列表的区别：字典的基本使用2、循环遍历3、字符串的定义4、字符串的常用操作字符串 查找和替换字符串 文本对齐演练去除
- 深度学习这个词指的是训练神经网络。深代表着非常大的神经网络。那么神经网络到底是什么呢?看了这篇文章后你就会有很直观的认识了。我们从一个房价预
- 安装方法：Windows：在终端输入命令：pip install scrapy；mac：在终端输入命令：pip3 install scrap
- 类:在HTML中当表现class属性的时候，人们可以用点(.)号来作为~=号的一个替代选择，所以div.value等同于div[class~
- 一、ASP中处在双引号中的可以是任意的字符、字符串，HTML代码1.<％response.write ("I&nb
- 本文实例讲述了js实现黑色简易的滑动门网页tab选项卡效果。分享给大家供大家参考。具体如下：这是一款js实现的黑色风格网页滑动门菜单，虽然简
- 细节汇总函数的形参列表可以是多个，返回值列表也可以是多个形参列表和返回值列表的数据类型，可以是值类型、也可以是引用类型函数的命名遵循标识符命
- 在我们修改过页面的某些数据后，通过想要把页面刷新一下，看看修改后的结果。由于vue的存在，页面是不会自动刷新的，需要我们手动进行操作。在vu
- create database MyDb on ( name=mainDb, filename='c:\MyDb\mainDb.md
- 一、打开、关闭文件 open的返回值用来确定打开文件的操作是否成功，当其成功时返回非零值，失败时返回零
- 前言PyInstaller可以用来打包python应用程序，打包完的程序就可以在没有安装Python解释器的机器上运行了。PyInstall
- Python 在命令行解析方面给出了类似的几个选择：自己解析， 自给自足(batteries-included)的方式，以及大量的
- 手头有 109 张头部 CT 的断层扫描图片，我打算用这些图片尝试头部的三维重建。基础工作之一，就是要把这些图片数据读出来，组织成一个三维的
- 你有没有觉得你的CSS样式表文件过于臃肿？其实如果你注意并培养一些比较好的CSS书写习惯，我想你的CSS样式表过于”肥胖”的问题会得到很好的
- 目录为什么要画局部放大图？程序逻辑程序实例总结这项功能的目的是为了方便使用opencv做图像标注工具。为什么要画局部放大图？在做图像数据标注
