CSS Sprites图片处理

简介:

CSS Sprites是一个网页图片处理方式,在国内都叫CSS精灵,css Sprites允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了,这样可以降低客户端对服务器的请求,节省资源。

需要下载的工具:

腾讯鬼哥提供的:

1: CSS Sprites 样式生成工具(bg2css) 3.0

http://www.cssforest.org/blog/index.php?s=download

2:air文件安装工具。Adobe提供的:

http://www.adobe.com/cn/products/air.html

3:已有的CSS Sprites生成的图片可以用如下工具进行取图获取样式

http://www.spritecow.com/

CSS Sprites图片处理

时间: 2024-10-28 19:21:59

CSS Sprites图片处理的相关文章

【CSS】CSS Sprites (CSS 精灵) 技术

CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- re

CSS Sprites使用

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","background- repe

CSS Sprites+CSS3 Icon Font

CSS Sprites+CSS3 Icon Font 先马上等有空一定看看转载于http://www.cnblogs.com/jingwhale/p/4280073.html CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.根据具体图标在大图上的位置,给背景定位. CSS Sprites加速的关键,不是降低质量,而是减少个数. 做成

移动端 CSS sprites 的 background-size 如何计算的。

最近践行 移动端实例,第一遇到的问题就是这个.如何找到自己需要的图片位置. 另外我看到说 CSS sprites 比 DataURL 要快很多,不过我看的是13年的一个分析,这好多年过去,不知道最新的如何. 我其实还不知道写图片元素的话 是用 img标签呢 还是用 background 呢? 以下是查阅到的如何计算background-size 的资料.感谢分享. 正常PC设置时: 1 .s1{2     width:22px;height:38px;background-position:-1

css sprites介绍

一.CSS Sprites简介 通常被意译为“CSS图像拼合”或“CSS贴图定位”.CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度. CSS Sprites允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张

利用css sprites减少图片请求

sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 什么是CSS Sprites CSS Sprites是指把网页中很多小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image.background-position显示图片特定部分达到和分散的一张张小图片一样的效果. JqueryUI的效果图如下 很多页面常用的小图标,但是我们看看每个小图标的源码的时候会发现,这些小图标的src

CSS Sprites技术(将背景图整合到一张图中,再利用CSS背景图片定位到要显示的位置)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

CSS Sprites 网页背景图片定位技术简述

很多时候我们打开一些网站的背景图片会发现是很多图标集合的一张完整的图片.这种网页使用的就是CSS Sprite,通过将多个图标整合在同一张图片,可以减少向服务器请求图片的次数,加快网页的加载速度. CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以

Web优化 --利用css sprites降低图片请求

sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉非常easy的东西.作用却非常大 什么是CSS Sprites CSS Sprites是指把网页中非常多小图片(非常多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image.background-position显示图片特定部分达到和分散的一张张小图片一样的效果. JqueryUI的效果图例如以下 非常多页面经常使用的小图标.可是我们看看每一个小图标的源代码的时候