CSS精灵技术
在CSDN中浏览博客时，在博客的结束有上一篇和下一篇的按钮，当我们把鼠标放上去的时候，可以看到这两个按钮会进行颜色的改变，这种技术称为CSS精灵技术。通过查看源发现，其实他是通过超级链接的伪类实现的，当鼠标放上去的时候改变背景颜色，这种实现能够通过一个类来控制所有的超级链接标签。文章中是通过图片来设置的。
思路一：准备两张大小相同，内容不同的图片，正常情况显示一张，鼠标经过的时候显示另外一张
a:link
是伪类，是超级链接，默认情况
a:hover
做鼠标放上去的时候
思路二：将两张图片合成一张图片，设置成图片的背景，然后将a:hover向上移动像素即可，background-position:0 -41;//图片的高度为82
HTML代码如下：
<span style="font-size:18px;"> <body>
<a id="one" href="#"></a>
<a id="two" href="#"></a>
</body>
</span>
CSS代码如下：
<span style="font-size:18px;"> <style type="text/css">
body{
margin:0;
padding:0;
}
body{
padding-left:100px;
padding-top:100px;
}
/*********** 思路一 *************/
#one{
/* 图片的大小为82*44 */
width:82px;
height:44px;
display:block;
background-color:#ccc;
background-image:url(image/link.jpg);
}
/* 当鼠标经过的时候，改变图片源 */
#one:hover{
background-image:url(image/hover.jpg);
}
/********* 思路二 ********/
#two{
/* 图片的大小为82*82 */
height:41px;
width:82px;
display:block;
margin-top:100px;
background-image:url(image/bottom.jpg);
}
/* 当鼠标经过的时候设置显示的位置 */
#two:hover{
background-position:0 -41px;/* 默认是从左上角开始显示的 */
}
</style></span>
CSS精灵技术的更多相关文章
- CSS 精灵技术（sprite）
一.精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
- CSS——精灵技术
精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
- CSS Sprites (CSS 精灵) 技术
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
- 【CSS】CSS Sprites (CSS 精灵) 技术
CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...
- CSS精灵技术（sprite）
CSS技术的使用场景:有效的减少了服务器接收和发送请求的次数,css精灵是一种出来网页背景图像的方式,将一个页面设计到的所有零星背景图集中到一张大图中去,然后将大图应用于网页 .通过backgroun ...
- CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- css:background-position > 精灵技术
background-position : length || length background-position : position || position 取值: length : 百分数 ...
- CSS之 元素显示隐藏，用户界面样式，文本溢出隐藏，精灵技术，三角形
元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...
- CSS——精灵图与背景图片定位
精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...
随机推荐
- JavaScript的数据类型和运算符总结
1.定义变量用关键字 var var a = 1 var b = "abc" 2.javascript脚本每一行要用分号隔开 3.javascript的代码一般放在html代码的最 ...
- centos 6.5 ftp服务配置及客户端使用
一.ftp服务简介 FTP是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”.用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(Ap ...
- 类实现Parcelable接口在Intent中传递
类实现了Parcelable接口就可以在Intent中传递 只要在类的定义中实现Parcelable接口 代码 package entity; import android.os.Parcel; ...
- 转载博客：rabbitmq
原文出处:http://www.cnblogs.com/sam-uncle/p/9202933.html 假设有这一些比较耗时的任务,按照上一次的那种方式,我们要一直等前面的耗时任务完成了之后才能接着 ...
- OrgChart 组织架构与PHP结合使用
一.OrgChart下载地址: https://github.com/dabeng/OrgChart 二.组织架构的表设计 CREATE TABLE `org_info` ( `id` int(11) ...
- ajax.beginform控制器中实体为null的问题
控制器: 函数声明:public JsonResult ApplyFun(Test test) 原因:在视图中有一个表单的name属性为test,因为冲突所导致.
- 将Win7笔记本设置成WiFi热点（无线路由器）
查看是否能启动WiFi网卡: S1:运行cmd命令,打开命令提示符窗口(以管理员身份运行). S2:在命令行输入:netsh wlan show drivers. 若“支持的承载网络”后为“是”,则可 ...
- laravel的foreach
1.控制器 2.模板
- tomcat 时间相差8个小时，百度上查到的，备份下
通常网上一查都是 修改 tomcat 的参数 ,如catalina 文件,jvm parameters 等.如果都不起作用,可以使用如下方式.. 你可以修改jdk的时间校正了,你这么来.进入 \hom ...
- spring mvc 用cookie和拦截器实现自动登录（/免登录）
Cookie/Session机制详解:http://blog.csdn.net/fangaoxin/article/details/6952954 SpringMVC记住密码功能:http://blo ...