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.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...
随机推荐
- 如何转换pdf文档为word文档--先标记下，本周把这个问题知识掌握
http://developer.51cto.com/art/201803/567539.htm
- 6-Qt给父widget加上styleSheet（添加背景图）而不改变子widget的styleSheet的方法
Qt给父widget加上styleSheet(添加背景图)而不改变子widget的styleSheet的方法 比如用stylesheet给widget加背景图,可以用qt designer修改ui文件 ...
- 利用redis完成自动补全搜索功能（三）
前面已经完成了分词和自动提示功能,最后把搜索结合在一起,来个完成的案例.当然最好还是用搜索分词解决,这个只是一个临时解决方案. 其实加上搜索很简单,要做的就是3件事 1. 分词的时候,把有用词的id存 ...
- 关于session报错问题。
刚开始一直报500错误,页面不提示,也没想着去查看日志文件.好几天了,一看日志,发现是这个问题.问了一下,是session的问题. 2017/07/25 16:57:49 [error] 2300#0 ...
- php 框架选择
背景 很多初级php甚至中级php都会陷入框架选择困难症,要么必须使用什么框架,要么一定不使用什么框架,而对框架的选择带来的效益和负担的成本并不是很清晰 框架大概分为以下这些 1. 简单轻量:tp,c ...
- iOS.Book.Effective Objective-C 2.0
1. 中文翻译版 (更新中) https://github.com/HagerHu/effective-objective-c-2.0 2. Book的主页 和 代码主页 http://www.eff ...
- 2018.08.30 游戏（概率dp）
题目描述 Alice 和 Bob 两个人正在玩一个游戏,游戏有很多种任务,难度为 p 的任务(p是正整数),有 1/(2^p) 的概率完成并得到 2^(p-1) 分,如果完成不了,得 0 分.一开始每 ...
- 2018.08.29 hdu3507 Print Article（斜率优化dp）
传送门 这应该算是斜率优化的模板题了. 就是要求打印n个数,每个数有一个参数a[i],每打印一段连续的数[l,r]需要的花费是(a[[l]+...+a[r])2+m" role=" ...
- 2018.07.13 [HNOI2015]落忆枫音（容斥原理+dp）
洛谷的传送门 bzoj的传送门 题意简述:在DAG中增加一条有向边,然后询问新图中一共 有多少个不同的子图为"树形图". 解法:容斥原理+dp,先考虑没有环的情况,经过尝试不难发现 ...
- 2017 pycharm 激活码
BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJCSUczQ0xJSzZGIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...