CSS面试题:css sprite是什么?有什么优缺点

171 阅读1分钟

CSS面试题:css sprite是什么?有什么优缺点

CSS sprite:雪碧图,也叫精灵图,它是把一堆小图标放在一张大图片上。

优缺点:****

(1)、优点:减少了http请求,做到了性能上的优化。

(2)、缺点:维护性、修改性较差,有需要修改需要重新测量。

注意:精灵图的标签都用行内标签,比如span,b,i****

参考代码如下:

<head> <style>

        /* 精灵图使用 */

        span{

            display: inline-block;

            width: 80px;

            height: 76px;

            background: url('img/sprite2.png');

            background-position: -333px -36px;

        }

    </style>

</head>

<body>

    <span>

    </span>

</body>