解密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降低负载之间权衡利弊,选择最适合你的项目 的方式。


猜你喜欢
golang值接收者和指针接收者的区别介绍
Firefox 的 Jetpack 扩展案例分析:Gmail 邮件提醒

带你一文读懂Python垃圾回收机制

pandas学习之df.fillna的具体使用
Python简单实现图片转字符画的实例项目

一款Python工具制作的动态条形图(强烈推荐!)

python实现telnet客户端的方法
python中扫描条形码和二维码的实现代码

keras实现调用自己训练的模型,并去掉全连接层
matlab中乘法“*”和点乘“.*”;除法“/”和点除“./”的联系和区别
Golang使用Gin框架实现HTTP上传文件过程介绍

pytorch 输出中间层特征的实例
python二分查找算法的递归实现方法
Python 敏感词过滤的实现示例
使用python-opencv读取视频,计算视频总帧数及FPS的实现
SQL Server:触发器实例详解
Python 实现文件读写、坐标寻址、查找替换功能

修改fckeditor的文件上传功能步骤

JSON+JavaScript处理JSON的简单例子
python mysql实现学生成绩管理系统
