<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
border: 1px solid gray;
/* 引入背景图片 */
background-image: url(./icon_sprite@2x.bf4cef49.png);
/* 设置背景图片大小:宽 高 */
background-size: 500px auto;
/* 调整图片背景位置 */
background-position: -195px -500px;
/* 鼠标放上变成小手 */
cursor: pointer;
}
div:hover{
background-position: -145px -500px;
}
</style>
</head>
<body>
<div></div>
</body>
20-图片精灵
最新推荐文章于 2024-05-30 11:27:58 发布