本文包含 CSS sprites 简介、原理、适用在哪些类型的网页制作中、背景图片的 position 值如何确定以及制作 sprites 的技巧。

【CSS sprites 简介】

CSS Sprites 在国内很多人叫 css 精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

【CSS sprites 原理】

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。

【CSS sprites 适用在哪些类型的网页制作中】

例如制作一个网页播放器,需要很多的按钮,按钮又有很多的不同的状态,例如按钮在鼠标移上去的时候颜色是橙色,在鼠标点下去的时候颜色是红色,在鼠标松开的时候颜色是灰色。这个时候我们需要使用到很多小的图片,我们可以合理的把这些小图片布局整合在一张图片中。这样可以减少在图片命名过程中遇到的命名问题、空间占用问题等。

【CSS sprites 使用案例】

例一 :下面讲解一个小的案例来说明 CSS sprites 的使用方法。我们实现下面这个案例的样式,将带有“分享中”字样的图片作为背景图片布局在 Box 里,假设 Box 大小为:width:291px  height: 157px

背景图片如下:

width: 57px  height: 20px

样式表中有关背景样式的写法应写为:

background-image: url(  );  /*背景图片地址*/
background-repeat: no-repeat;
background-position: 234px 0px;

【CSS sprites 背景图片的 position 值如何确定】

如图黑色边框内的两个方框,边长均为 200px 。在 CSS sprites 中 ① 左上角坐标为 (0,0),② 的左上角坐标为 (-200,-200)。我们在 CSS sprites 中使用坐标值时都是使用左上角的坐标。

【制作 sprites 的技巧】

例如我们例一中的“分享中”的图片,它是位于整个 Box 的右边,那么我们在制作精灵图片的时候要把它放置的精灵图片的左边,这样可以有效的节省精灵图片布局空间。当然,当把它放置在左上角的时候,相应的 X 、Y值便是正值。

【CSS sprites (CSS图片精灵) 详解】的更多相关文章

  1. CSS Sprites (css精灵)

    CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...

  2. CSS sprites(css 精灵):将小图标整合到一张图片上

    一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS backgr ...

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

    sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉非常easy的东西.作用却非常大 什么是CSS Sprites CSS Sprites是指把网页中 ...

  4. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  5. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

  6. PNG,JPEG,BMP,JIF图片格式详解及其对比

    原文地址:http://blog.csdn.net/u012611878/article/details/52215985 图片格式详解 不知道大家有没有注意过网页里,手机里,平板里的图片,事实上,图 ...

  7. css动画-animation各个属性详解(转)

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  8. CSS Sprites (CSS 精灵) 技术

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

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

    CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...

  10. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

随机推荐

  1. 如何在WIN7中关闭JAVA自动更新

    在win7系统上面安装了JAVA JRE或JDK后,就会启动一个jusched,它会定时检查更新,每次开机都会推荐更新或者升级,可能有的朋友在win7下无论如何都关不掉java客户端的自动更新,而又不 ...

  2. java 反射(reflect)总结,附对象打印工具类

    java反射机制认知 java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取类的信息以及动态调用对象的方法的 ...

  3. 国外NET 空间免费申请使用

    最近研究微信公众帐号接口开发,需要使用到域名和空间,所以在度娘和谷哥的帮助下找到国外免费的空间, 刚刚注册完所以截图和大家分享下 注册地址:http://member.mywindowshosting ...

  4. SVN安装手册

    转:http://www.cnblogs.com/newsea/archive/2012/04/28/2474818.html 常用工具2012-04-04 21:24        by       ...

  5. 标准差(standard deviation)和标准误差(standard error)你能解释清楚吗?

    by:ysuncn(欢迎转载,请注明原创信息) 什么是标准差(standard deviation)呢?依据国际标准化组织(ISO)的定义:标准差σ是方差σ2的正平方根:而方差是随机变量期望的二次偏差 ...

  6. (转载)myeclipse项目名称重命名

    myeclipse项目名称重命名 实例1 今天晚上在做一个jsp唱片显示的实例,myeclipse项目名称原本想写music结果写成了musci.这就需要项目名称的重命名,单纯的使用 “重构--> ...

  7. java输入输出流小细节

    package System; public class Systemdemo { public static void main(String args[]){ demo1(); demo2(); ...

  8. 网站优化的经验和技巧--精简高效的C#

    对大型网站,技术涉及面非常广,对硬件,软件,编程语言,Web Service,防火墙等等有很高要求.    面对大量用户,高并发请求,可以使用高性能服务器,高性能编程语言,高性能数据库,加大带宽等,这 ...

  9. CentOS6.5编译安装最新MySQL 5.7.11

    安装前工作:1,从官方网址下载MySQL5.7.11源码包,大概49M2,安装好CentOS6.5 64位操作系统.建议update操作系统,以便是此版本最新的3. yum -y install  g ...

  10. .net 关于数据库的链接

    web.config的配置 <appSettings> <add key="Configpath" value="~/XmlConfig/webset. ...