(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-12)

是指将多个图整合到一张图上,避免多次请求服务器下载。

主要使用CSS background-position 属性。

语法示例:

#viploginbutton{width:65px; height:23px; background:url(images/buttonbg.png) no-repeat;background-position:0 -86px;border:0px;color:#FFF;cursor:pointer;}

#viploginbutton:hover{width:65px; height:23px; background:url(images/buttonbg.png) no-repeat;background-position:-65px -86px;border:0px;color:#FFF;cursor:pointer}

#viploginbutton:active{width:65px; height:23px; background:url(images/buttonbg.png) no-repeat;background-position:-130px -86px;border:0px;color:#FFF;cursor:pointer}

(border:0px是让按钮的边框消失,cursor:pointer是让鼠标悬停时变成小手模样。)

先要指定元素的宽和高,然后指定那个大个背景图,

images/buttonbg.png

最后指定背景图的左上角的坐标。依次是x px和y px

注意:原点0px 0px代表的是整个背景图左上角的那个位置

向下和向右延伸都要使用负值。

css 精灵的用法的更多相关文章

  1. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  2. css精灵

    ○ css 精灵(Sprites)技术利用photoshop将图片整合,然后用background-images,background-position,background-repeat技术,对图片 ...

  3. css精灵动画

    精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是 ...

  4. 格式与布局 CSS阴影效果(Box-shadow)用法

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relat ...

  5. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  6. css cursor url用法格式详解

    css cursor url用法格式:css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以 实例代码:html{cursor: url("h ...

  7. 按钮制作技巧(css精灵效果)-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  8. css精灵(css script 技术)

    上班差不多有15天了,感觉每天都有写不完的也页面,每天都有不同的东西需要学习进步,很充实哦.今天接触到css精灵这个东西.其实之前有看过这种技术,但是没有操作过,只是听说这个技术很强大,能干嘛干嘛,但 ...

  9. CSS Sprites (css精灵)

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

随机推荐

  1. VPN协议PPTP/L2TP/OpenVPN及SSH的区别与详解

    大家在使用VPN的时候都会看到商家有提供PPTP VPN.L2TP  VPN.OpenVPN.SSH代理等多种协议选择,但是许多朋友却不知道它们之间有什么区别,也不知道该如何选择,今天整理了一些日常收 ...

  2. JVM——新生代与老年代

    首先看在JVM的堆中,按代的划分: Young:主要是用来存放新生的对象. Old:主要存放应用程序中生命周期长的内存对象. Permanent:是指内存的永久保存区域,主要存放Class和Meta的 ...

  3. android studio开发工具的android library打包文件(.aar)本地引用

    by 蔡建良 2014-5-13 关键点: 利用Gradle发布本地maven库支持android library 打包文件(*.aar) 的本地引用 开发环境: windows7 64位操作系统 a ...

  4. 64 位系统遇到未在本地计算机上注册 Microsoft.Jet.OLEDB.4.0

    本人写的.net程序部署在windowsserver 2003的操作系统上正常,部署到windows server 2008上时候报错“未在本地计算机上注册 Microsoft.Jet.OLEDB.4 ...

  5. Oracle 安装 检查操作系统版本 必须是 5.0 5.1 的解决办法

    打开 oraparam.ini文件 添加红色部分 Windows=5.1,5.2,6.1 最下面添加 [Windows-6.1-required]#Minimum display colours fo ...

  6. 网络编程 --- URLConnection --- 读取服务器的数据 --- java

    使用URLConnection类获取服务器的数据 抽象类URLConnection表示一个指向指定URL资源的活动连接,它是java协议处理器机制的一部分. URL对象的openConnection( ...

  7. Macbook pro内存升级

    http://support.apple.com/kb/HT1270?viewlocale=zh_CN&locale=zh_CN#link1 https://support.apple.com ...

  8. gcc 安装

    最近在中标麒麟上面工作,结果发现上面gcc都没有,没有办法只好自己装(PS 中标麒麟:怪我咯) 资源:http://download.csdn.net/detail/jiahuat/8715413 按 ...

  9. http://www.blogjava.net/nokiaguy/category/37087.html

    http://www.blogjava.net/nokiaguy/category/37087.html

  10. 【原创】用JAVA实现大文件上传及显示进度信息

    用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/grayprince/UploadBigFil ...