精灵图

作者: 让思念入土 | 来源:发表于2019-01-11 22:06 被阅读0次

为了降低服务器的接受和发送的请求次数，提示网站的加载速度所以要用精灵图

核心的属性：background-position
精灵图的坐标一般为负值



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精灵图</title>
    <style>
        div {
            float: left;
            background: url(image/abcd.jpg) no-repeat;
        }
        .l {
            width: 93px;
            height: 110px;
            background-position: -7px -276px;
        }
        .i {
            width: 62px;
            height: 108px;
            background-position: -326px -141px;
        }
        .a {
            width: 107px;
            height: 108px;
            background-position: 0 -10px;
        }
        .o {
            width: 108px;
            height: 110px;
            background-position: -373px -276px;
        }
    </style>
</head>
<body>
    <div class="l"></div>
    <div class="i"></div>
    <div class="a"></div>
    <div class="o"></div>    
</body>
</html>

Image 10.png