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>

附件

此处内容需要评论回复后方可阅读。

不起眼的小广告