ToDo Blog

CSS Sprite特性

CSS雪碧也叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。

CSS Sprite优点

可以减少图片的质量，网页的图片加载速度更快。
减少图片的请求次数，加快网页的打开。
解决了网页设计师在图片命名上的困扰，提高了网页的制作效率。
更换风格方便，便于后期维护。

显示CSS Sprite条件

需要一个设置好宽、高的容器
需要设置background-image来指定图片所属路径
需要设置background-position来定位所需图标的位置

CSS Sprite使用难点

CSS Sprite的使用难点在于如何在一张图片中定位到所需部分
可以用浏览器自带的调试工具进行调试来达到理想的效果

CSS Sprite应用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Sprite</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        img {
            border: 0;
        }
        .box {
            width: 600px;
            height: 300px;
            margin: 10px;
        }
        span {
            background-image: url(./icon.png);
            width: 30px;
            height: 30px;
            display: inline-block;
            background-repeat: no-repeat;
        }
        .icon1 {
            background-position: 0 0;
        }
        .icon2 {
            background-position: 0 -36px;
        }
        .icon3 {
            background-position: 0 -72px;
        }
        .icon4 {
            background-position: 0 -108px;
        }
        .icon5 {
            background-position: 0 -144px;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="icon1"></span>
        <span class="icon2"></span>
        <span class="icon3"></span>
        <span class="icon4"></span>
        <span class="icon5"></span>
    </div>
</body>
</html>