效果图
css
<style> * { margin: 0; padding: 0; } .cssSprite { margin: 100px auto; /* background-color: hotpink; */ width: 567px; height: 378px; border: 1px solid black; } ul { list-style: none; margin: 0; padding: 0; } li { float: left; width: 189px; height: 189px; background-image: url("img/CSSsprite.jpg"); background-repeat: no-repeat; } .img2 { background-position: -189px 0px; } .img3 { background-position: -378px 0px; } .img4 { background-position: 0px -189px; } .img5 { background-position: -189px -189px; } .img6 { background-position: -378px -189px; } </style>
html
<body> <div class="cssSprite"> <ul> <li class="img1"> <a href="#" target="_blank"></a> </li> <li class="img2"> <a href="#" target="_blank"></a> </li> <li class="img3"> <a href="#" target="_blank"></a> </li> <li class="img4"> <a href="#" target="_blank"></a> </li> <li class="img5"> <a href="#" target="_blank"></a> </li> <li class="img6"> <a href="#" target="_blank"></a> </li> </ul> </div> </body>