雪碧图

<!DOCTYPE html>

<html lang="en">

     <head>

         <meta charset="UTF-8">

          <title>雪碧图</title>

         <style type="text/css">

         .btn{

                 display: block;

                 width: 42px;

                 height: 30px;

                 background-image: url(3.png);

                 background-repeat: no-repeat;

                 background-position: -10px -339px;

                }

         .btn:hover{

                            background-position: -60px -339px;

                          }

         .btn:active{

                           background-position: -125px -339px;

                           }

         </style>

     </head>

     <body>

         <a href="#" class="btn"></a>

     </body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容