<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 93px;
height: 29px;
background-image:url(./btn.png)
}
.box:hover{
/* background-image:url(./hover.png) */
background-position:-93px 0;
}
.box:active{
/* background-image:url(./active.png) */
background-position:-186px 0;
}
/*
解决图片闪烁问题；
可以将多个图片放到一个大图片中，然后通过调整background-position来移动图片背景；
这样图片可以同时加载到网页中，
可以避免出现闪烁的问题；
这个技术在网页中应用十分广泛，被称为CSS-sprite，CSS精灵，被称为雪碧图。
*/
/*
雪碧图的使用步骤；
1、确定要使用的图标；
2、测量图标的大小；
3、根据测量结果创建一个元素；
4、将雪碧图设置为元素的背景图片；
5、设置一个偏移量，来正确显示图片；
雪碧图的特点：
一次性将图片加载到网页中，降低请求次数，加快访问速度，提升用户的体验。
*/
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
CCS 雪碧图的使用
猜你喜欢
转载自blog.csdn.net/weixin_47401101/article/details/112104791
今日推荐
周排行