CSS Sprite图

最新推荐文章于 2024-08-14 21:41:35 发布

原创最新推荐文章于 2024-08-14 21:41:35 发布 · 533 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #sprite #性能优化 #图片

css 专栏收录该内容

7 篇文章

订阅专栏

    CSS Sprite图已经成为网站性能优化中必用的一个技巧了，我在这里总结一下CSS Sprite的用法。如有错误，欢迎指正。

CSS Sprite优点

减少http请求数，加快页面加载速度
(因网页上的每一个图都会创建一个http请求)

CSS Sprite使用场景

页面上使用多个静态小图，而font icon又无法满足要求。

CSS Sprite缺点

1、动态获取的图片不适合使用CSS Sprite
2、需要repeat的图片不适合使用CSS Sprite
3、图片太大也不适合使用CSS Sprite

CSS Sprite用到的知识

CSS方面：主要用到background属性，尤其是background-image、background-repeat、background-position
HTML方面：主要用到显示图片大小的块级标签

CSS Sprite的实现代码

用一个简单的例子实现一个CSS Sprite，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            div{
                width: 133px;
                height: 40px;
                margin:100px auto;
                border:1px solid #ccc;
                background-image: url(./sprite.png);
                background-repeat: no-repeat;
                background-position: -17px 0;
            }
        </style>
    </head>
    <body>
        <div> 
        </div>
    </body>
</html>

实现的效果如下：
这里写图片描述

图解CSS Sprite的实现

下面，我用图说明CSS Sprtie的实现过程

css sprite素材

我们利用的是google网站的一副css sprite图，素材如下：

这里写图片描述

html页面

html中显示图片的div标签就相当于一个窗口，通过这个窗口来展示将要显示的图片；

这里写图片描述

未设置background-position时的页面

（半透明图都是为了说明CSS Sprite而后期添加的，非页面本身展示效果）
这里写图片描述

设置background-position后的页面

css中的background-image为整张css sprite图；background-repeat均取no-repeat;
起关键作用的就是background-position：它指出了从css sprite图中的那个位置开始展示sprite图

（半透明图都是为了说明CSS Sprite而后期添加的，非页面本身展示效果）
这里写图片描述

总结

CSS Sprite的实现需要CSS和html两者配合：
1、html负责用一个块级标签定义 展示sprite图中一个小图的"窗口"的宽和高;
2、css的background-position负责指出 展示的sprite图某个小图的起始位置(即该小图左上角的坐标)