css背景3 

<head>
        <meta charset="UTF-8">
        <title>练习三</title>
        <style type="text/css">
            .box4{
                width: 223px;
                height: 195px;
                /*background-color: yellow;*/
                background-image: url(img/bg2.png);
                background-position:0px 0px;
            }
            .box4:hover{
                background-position: 0px -200px;
            }
            .box1{
                width: 195px;
                height: 195px;
                background-image: url(img/bg2.png);
                background-position: -222px 0px;
            }
            .box1:hover{
                background-position: -222px -201px;
            }
            .box2{
                width: 205px;
                height: 200px;
                background-image: url(img/bg2.png);
                background-position: -415px 0px;
            }
            .box2:hover{
                background-position: -415px 197px;
            }
            .box3{
                width: 200px;
                height: 200px;
                background-image: url(img/bg2.png);
                background-position: -616px 0px;
            }
            .box3:hover{
                background-position: -616px -195px;
            }
            
        </style>
    </head>
    <body>
        <div class="box4"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

 

posted @ 2019-01-24 17:51  forwardq  阅读(193)  评论(0)    收藏  举报