将按钮的不同形态合成一张图片,并将其加入我们的项目中。
<style>
a: link{
display:block;
width:93px;
height:29px;
background-image:url(合成图片的链接)
}
a:hover{
background-position:-93px 0;
}
a:active{
background-position:186px 0;
}
解决图片闪烁的问题
可以将多个小图片统一保存到一个大图片中,然后
通过调整background-position来显示的图片。
这样图片就会同时加载到网页中,就可以有效的避
免出现闪烁的问题。
【这个技术在网页中应用十分广泛,被称为CSS-Sprite,这种图我们称为雪碧图。】
</style>
</head>
<body>
<a href=“javascript:;”></a>
</body>
雪碧图的使用步骤
1先确定要是用的图标
2测量图标的大小
3根据测量结果创建一个元素。
4将雪碧图设置为元素的背景图片
5设置一个偏移量以显示正确的图片
雪碧图的特点
一次性将多个图片加载进页面,降低请求的次数,加快访问速度,提升用户体验。