雪碧图

作者: 中二死军宅 | 来源:发表于2019-08-22 10:33 被阅读0次

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>雪碧</title>
    <style type="text/css">
    .btn:link{
    /将a转换为块元素/
    display: block;
    /设置宽高/
    width: 42px;
    height: 30px;
    /设置背景图片/
    background-image: url(./img/1.png);
    /设置背景图片不重复/
    background-repeat: no-repeat;
    background-position: -10px -338px;
    }
    .btn:hover{
    /当是hover状态时,希望图片可以向左移动/
    background-position: -58px -338px;
    }
    .btn:active{
    /当是active状态时,希望图片再向左移动/
    background-position: -130px -338px;
    }
    </style>
    </head>
    <body>
    <a href="#" class="btn"></a>
    </body>
    </html>

    相关文章

      网友评论

          本文标题:雪碧图

          本文链接:https://www.haomeiwen.com/subject/sbjkbqtx.html