css利用定位制作雪碧地图

顺晟科技
2021-09-23 11:24:00
216
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1{
            border: 5px solid black;
        }
        .div2{
            width: 91px;
            height: 139px;
            background-image: url("../images/1.png");
        }
        .div3{
              width: 91px;
              height: 139px;
              background-image: url("../images/1.png");
              -webkit-transform: translate(15px,-120px);
          }
        .div4{
            width: 91px;
            height: 139px;
            background-image: url("../images/2.png");
            -webkit-transform: translate(30px,-240px);
        }
        .div5{
            width: 91px;
            height: 139px;
            background-image: url("../images/3.png");
            -webkit-transform: translate(45px,-360px);
        }
        .div6 {
            width: 91px;
            height: 139px;
            background-image: url("../images/4.png");
            -webkit-transform: translate(60px,-480px);
        }
        .div7{
            width: 91px;
            height: 139px;
            background-image: url("../images/5.png");
            -webkit-transform: translate(75px,-600px);
        }
        .div7{
            width: 91px;
            height: 139px;
            background-image: url("../images/6.png");
            -webkit-transform: translate(80px,-600px);
        }
        .div8{
            width: 91px;
            height: 139px;
            background-image: url("../images/7.png");
            -webkit-transform: translate(120px,-739px);
        }
        .div9{
            width: 91px;
            height: 139px;
            background-image: url("../images/8.png");
            -webkit-transform: translate(165px,-878px);
        }
        .div10{
              width: 91px;
              height: 139px;
              background-image: url("../images/10.png");
              -webkit-transform: translate(200px,-1035px);
          }
        .div11{
            width: 91px;
            height: 139px;
            background-image: url("../images/11.png");
            -webkit-transform: translate(220px,-1200px);
        }
        .div12{
            width: 91px;
            height: 139px;
            background-image: url("../images/13.png");
            -webkit-transform: translate(240px,-1360px);
        }
        .div13{
            width: 91px;
            height: 139px;
            background-image: url("../images/14.png");
            -webkit-transform: translate(260px,-1530px);
        }

    </style>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
    <div class="div7"></div>
    <div class="div8"></div>
    <div class="div9"></div>
    <div class="div10"></div>
    <div class="div11"></div>
    <div class="div12"></div>
    <div class="div13"></div>

</div>

</body>
</html>
上一篇：html鼠标自定义右键菜单:css 下一篇：css精灵钢性铸铁雪碧图生成工具
网站建设

Css

css利用定位制作雪碧地图
