<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
div {width:62px;height:67px;}//定义div的宽高
div{background-image:url(img/pic.jpg);}//定义背景图片
div.pic{background-position:0px 0px;}//图片的起始位置
div.pic:hover{background-position:-77px 0px ;}//图片偏移的位置
div.pic2{background-position:-154px 0px ;}
div.pic2:hover{background-position:-231px 0px ;}
div.pic3{background-position:-0px -79px ;}
div.pic3:hover{background-position:-77px -79px ;}
</style>
</head>
<body>
<div class="pic">
</div>
<div class="pic2">
</div>
<div class="pic3">
</div>
</body>
</html>
css如何定位大图中的小图标
最新推荐文章于 2023-11-26 00:20:47 发布