css 精灵的用法
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期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 精灵的用法的更多相关文章
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- css精灵
○ css 精灵(Sprites)技术利用photoshop将图片整合,然后用background-images,background-position,background-repeat技术,对图片 ...
- css精灵动画
精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是 ...
- 格式与布局 CSS阴影效果(Box-shadow)用法
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relat ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- css cursor url用法格式详解
css cursor url用法格式:css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以 实例代码:html{cursor: url("h ...
- 按钮制作技巧(css精灵效果)-高级版
[转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...
- css精灵(css script 技术)
上班差不多有15天了,感觉每天都有写不完的也页面,每天都有不同的东西需要学习进步,很充实哦.今天接触到css精灵这个东西.其实之前有看过这种技术,但是没有操作过,只是听说这个技术很强大,能干嘛干嘛,但 ...
- CSS Sprites (css精灵)
CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...
随机推荐
- 多线程&多进程解析:Python、os、sys、Queue、multiprocessing、threading
当涉及到操作系统的时候,免不了要使用os模块,有时还要用到sys模块. 设计到并行程序,一般开单独的进程,而不是线程,原因是python解释器的全局解释器锁GIL(global interpreter ...
- ORACLE 中KILL session
我们知道,在Oracle数据库中,可以通过kill session的方式来终止一个进程,其基本语法结构为: alter system kill session 'sid,serial#' ; 被kil ...
- Spring中WebApplicationContext的研究
Spring中WebApplicationContext的研究 ApplicationContext是Spring的核 心,Context我们通常解释为上下文环境,我想用“容器”来表述它更容易理解一些 ...
- CURL 错误码 中文翻译
这几天用CURL做下载系统,经常会遇到一些问题,很多的错误还是和CURL的option有关.现在把这些错误码贴过来,方便查看一下. 错误代码列表 CURLE_UNSUPPORTED_PROTOCOL ...
- python与saltstack动态传参变量名的研究
python动态变量名 import sys createVar = locals() listTemp = range(1,10) for i in range(1, len(sys.argv)): ...
- mac配置appium进行自动化测试
先去brew.sh这个网站,拷贝最新的下载安装命令,黏贴到终端里,回车,按提示下载安装. 安装完毕后,运行brewupdate 看看是否有更新,然后输入brew ios-webkit-debug-pr ...
- 基于OSGI.Net的图形界面系统
在2013年的十月份有幸接触了osgi.net和iopenworks的创始人,了解和学习的插件式开发,开始了后台数据的处理生涯. 第一个有图形界面的系统——智能农业的环境监测系统,其实在这个系统中所有 ...
- 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 ...
- Jcrop+strut2+jsp实现图片剪切
在网上找,发现都是不全的,要么没获取图片路径,要么没后台等等,今天就来个全的 一:总体步骤 =>页面上传图片 =>获取上传图片剪切的四个值x,y,w,h =>后天进行剪切 接下来就开 ...
- windows下跑python flask,环境配置
首先声明一下,我安装的是python 2.7. 第一步:下载easy_setup.py 下载地址:https://pypi.python.org/pypi/setuptools 这个下载地址真心难找, ...