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精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...
随机推荐
- adb shell 查找并删除文件
# -*- coding: cp936 -*- ## function: remove file ## remark: python version -- import os,sys import l ...
- Linux下基于HTTP协议带用户认证的GIT开发环境设置
Git 的访问可以采用 HTTP 或 SSH 协议安全的访问,通常我们使用 gitlib 进行 Web 管理,但是在 Linux 命令行开发环境下,基本都是使用 SSH 协议,只需要在 gitlib ...
- JSONP实例
JSONP实例 package sus.app; import java.io.IOException; import java.util.Map; import javax.servlet.http ...
- C#中的选择查询相关
看代码实现: using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...
- Android彩蛋效果,微信彩蛋效果
根据Android源码修改,具有微信彩蛋效果 主要代码 public static class Board extends FrameLayout { public static final bool ...
- spring TaskExecutor
TaskExecutor抽象 Spring 2.0 为执行器(Executor)处理引入了一个新的抽象层.Executor是Java 5的名词,用来表示线程池的概念.之所以用这个奇怪的名词,是因为实际 ...
- MYSQL性能查看(命中率,慢查询)
网上有很多的文章教怎么配置MySQL服务器,但考虑到服务器硬件配置的不同,具体应用的差别,那些文章的做法只能作为初步设置参考,我们需要根据自己的情况进行配置优化,好的做法是MySQL服务器稳定运行了一 ...
- html --- javascript --- div --- 拖拽方块
当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...
- C#轻量级企业事务 - TransactionScope
using System; using System.Data.SqlClient; using System.Transactions; namespace SomeDBTransaction { ...
- linux 条件变量
互斥量就是一把锁,在访问数据时能保证同一时间内只有一个线程访问数据,在访问完以后再释放互斥量上的锁. 条件变量是利用线程间共享的全局变量进行同步的一种机制,主要包括两个动作:一个线程等待"条 ...