(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期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. 多线程&多进程解析:Python、os、sys、Queue、multiprocessing、threading

    当涉及到操作系统的时候,免不了要使用os模块,有时还要用到sys模块. 设计到并行程序,一般开单独的进程,而不是线程,原因是python解释器的全局解释器锁GIL(global interpreter ...

  2. ORACLE 中KILL session

    我们知道,在Oracle数据库中,可以通过kill session的方式来终止一个进程,其基本语法结构为: alter system kill session 'sid,serial#' ; 被kil ...

  3. Spring中WebApplicationContext的研究

    Spring中WebApplicationContext的研究 ApplicationContext是Spring的核 心,Context我们通常解释为上下文环境,我想用“容器”来表述它更容易理解一些 ...

  4. CURL 错误码 中文翻译

    这几天用CURL做下载系统,经常会遇到一些问题,很多的错误还是和CURL的option有关.现在把这些错误码贴过来,方便查看一下. 错误代码列表 CURLE_UNSUPPORTED_PROTOCOL ...

  5. python与saltstack动态传参变量名的研究

    python动态变量名 import sys createVar = locals() listTemp = range(1,10) for i in range(1, len(sys.argv)): ...

  6. mac配置appium进行自动化测试

    先去brew.sh这个网站,拷贝最新的下载安装命令,黏贴到终端里,回车,按提示下载安装. 安装完毕后,运行brewupdate 看看是否有更新,然后输入brew ios-webkit-debug-pr ...

  7. 基于OSGI.Net的图形界面系统

    在2013年的十月份有幸接触了osgi.net和iopenworks的创始人,了解和学习的插件式开发,开始了后台数据的处理生涯. 第一个有图形界面的系统——智能农业的环境监测系统,其实在这个系统中所有 ...

  8. Cracking the Code Interview 4.3 Array to Binary Tree

    Given a sorted (increasing order) array, write an algorithm to create a binary tree with minimal hei ...

  9. Jcrop+strut2+jsp实现图片剪切

    在网上找,发现都是不全的,要么没获取图片路径,要么没后台等等,今天就来个全的 一:总体步骤 =>页面上传图片 =>获取上传图片剪切的四个值x,y,w,h =>后天进行剪切 接下来就开 ...

  10. windows下跑python flask,环境配置

    首先声明一下,我安装的是python 2.7. 第一步:下载easy_setup.py 下载地址:https://pypi.python.org/pypi/setuptools 这个下载地址真心难找, ...