<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景background-position切图</title>
<style>
.showImage{
background-image: url(9pic2.jpg);
width: 100px;
height: 100px;
}
.showImage:hover{
background-image: url(9pic1.jpg);
}
ul{
list-style: none;
}
ul li{
float: left;
margin: 20px;
}
#item1{
background-position: 0 0;
}
#item2{
background-position: -100px 0;/*控制 左右上下*/
}
#item3{
background-position: -200px 0;
}
#item4{
background-position: 0 -100px;
}
#item5{
background-position: -100px -100px;
}
#item6{
background-position: -200px -100px;
}
#item7{
background-position: 0 -200px;
}
#item8{
background-position: -100px -200px;
}
#item9{
background-position: -200px -200px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li id="item1" class="showImage"></li>
<li id="item2" class="showImage"></li>
<li id="item3" class="showImage"></li>
<li id="item4" class="showImage"></li>
<li id="item5" class="showImage"></li>
<li id="item6" class="showImage"></li>
<li id="item7" class="showImage"></li>
<li id="item8" class="showImage"></li>
<li id="item9" class="showImage"></li>
</ul>
</div>
</body>
</html><html lang="en">
<head>
<meta charset="
阅读背景：
背景background-position切图
来源：互联网
分享到：
