<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>雪碧图</title>
<style>
div{
width:100px;
height:100px;
background-image:url('https://img.php.cn/upload/image/587/391/184/1652174108167035.jpg');
background-repeat:no-repeat;
background-position:center;
padding:0;
}
.box{
width:300px;
height:300px;
background-image:none;
position:relative;
}
.box1{
background-position:-11px-8px;
}
.box2{
background-position:-121px-8px;
position:absolute;
left:100px;
top:0;
}
.box3{
background-position:-231px-8px;
position:absolute;
left:200px;
top:0;
}
.box4{
background-position:-341px-8px;
position:absolute;
left:0;
top:100px;
}
.box5{
background-position:-451px-8px;
position:absolute;
left:100px;
top:100px;
}
.box6{
background-position:-561px-8px;
position:absolute;
left:200px;
top:100px;
}
.box7{
background-position:-671px-8px;
position:absolute;
left:0;
top:200px;
}
.box8{
background-position:-781px-8px;
position:absolute;
left:100px;
top:200px;
}
.box9{
background-position:-891px-8px;
position:absolute;
left:200px;
top:200px;
}
</style>
</head>
<body>
<divclass="box">
<divclass="box1"></div>
<divclass="box2"></div>
<divclass="box3"></div>
<divclass="box4"></div>
<divclass="box5"></div>
<divclass="box6"></div>
<divclass="box7"></div>
<divclass="box8"></div>
<divclass="box9"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
相关推荐