CSS 高级技巧-精灵图_精灵图如何移动-CSDN博客

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
    </body>
</html>

.box1 {
    width: 60px;
    height: 60px;
    margin: 100px auto;
    background: url("images/picture.png") no-repeat -182px 0;
}
.box2 {
    width: 27px;
    height: 25px;
    margin: 100px 500px;
    background: url("images/picture.png") no-repeat -155px -106px;
}

效果图

精灵图课堂案例

拼姓名

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="box">
            <span class="k"></span>
            <span class="i"></span>
            <span class="n"></span>
            <span class="g"></span>
        </div>
    </body>
</html>

.box {
    width: 1000px;
    height: 500px;
}
.box span {
    display: inline-block;
    background: url("images/name.jpg") no-repeat;
}
.box .k {
    width: 105px;
    height: 114px;
    background-position: -495px -140px;
}
.box .i {
    width: 62px;
    height: 108px;
    background-position: -326px -141px;
}
.box .n {
    width: 114px;
    height: 114px;
    background-position: -253px -273px;
}
.box .g {
    width: 107px;
    height: 110px;
    background-position: -95px -139px;
}

效果图