示例1:
.container {
margin: 200px 200px;
}
.i {
width: 20px;
height: 20px;
background: url(./background.png) no-repeat;
background-size: 20px 40px;
transition: background-position .4s;
}
.i:hover {
background-position: 0 -20px;
}
<div class="container">
<div class="i"></div>
</div>
示例2:
.container {
width: 400px;
height: 300px;
border: 1px solid red;
background: url(./panda.jpg);
/* 图片的长宽比保持不变,让图片完整的显示出来 */
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
/* 让图片覆盖容器 */
/* background-size: cover; */
}
<div class="container"></div>