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

标签:CSS,Sprites,技巧,工具
0
投稿

猜你喜欢

  • golang值接收者和指针接收者的区别介绍

    2024-04-25 13:20:33
  • Firefox 的 Jetpack 扩展案例分析:Gmail 邮件提醒

    2009-10-15 12:41:00
  • 带你一文读懂Python垃圾回收机制

    2022-03-03 11:58:03
  • pandas学习之df.fillna的具体使用

    2023-10-16 20:34:08
  • Python简单实现图片转字符画的实例项目

    2023-02-24 02:01:47
  • 一款Python工具制作的动态条形图(强烈推荐!)

    2021-07-21 17:38:18
  • python实现telnet客户端的方法

    2021-04-14 21:07:24
  • python中扫描条形码和二维码的实现代码

    2023-02-15 23:00:12
  • keras实现调用自己训练的模型,并去掉全连接层

    2023-08-10 16:34:21
  • matlab中乘法“*”和点乘“.*”;除法“/”和点除“./”的联系和区别

    2022-03-08 19:52:44
  • Golang使用Gin框架实现HTTP上传文件过程介绍

    2024-04-28 09:18:12
  • pytorch 输出中间层特征的实例

    2022-06-08 07:36:39
  • python二分查找算法的递归实现方法

    2023-05-12 23:22:48
  • Python 敏感词过滤的实现示例

    2021-07-04 12:17:28
  • 使用python-opencv读取视频,计算视频总帧数及FPS的实现

    2022-02-03 06:55:34
  • SQL Server:触发器实例详解

    2024-01-26 03:25:47
  • Python 实现文件读写、坐标寻址、查找替换功能

    2021-06-02 07:36:42
  • 修改fckeditor的文件上传功能步骤

    2023-03-19 17:31:28
  • JSON+JavaScript处理JSON的简单例子

    2023-10-09 09:39:56
  • python mysql实现学生成绩管理系统

    2024-01-25 09:28:12
  • asp之家 网络编程 m.aspxhome.com