CSS _ CSS 图片拼合

CSS 图片拼合

图片拼合技术

所谓的图片拼合技术就是把很多张常用的图片拼合在一张图片上，然后网页中只加载这一张图片，具体要用的时候，直接从这张图片里截取要显示的部分就ok啦~

这种方式的好处就是加速，避免同时加载很多张图片而耗费时间。而且这种方式能减少客户端与服务器的连接数。

但是呢，但是呢，但是呢，

但是时代不一样了，图片拼合技术早就过时了，那都是贫道小学时期所流行的技术，那时靠一根电话线拨号上网，加载一个页面就像挤牙膏一样。现在这个时代，带宽提高，图片都会直接用第三方专用的图片类云服务器外加cdn，根本不存在那些问题了。所以不必学习与运用这种奇技淫巧来追求图片加载速度了。

因为是过时的技术了，看看例子就好了，不必认真学了。

Image Sprites示例

试一下，然后就可以结束本小节的学习了。

<!DOCTYPE html>
<html>
<head>
<style>
#html_logo {
    width: 60px;
    height: 60px;
    background: url(https://logo.zhuanfou.com/ex_sprites.jpg) 0 0;
}

#h5_logo {
    width: 60px;
    height: 60px;
    background: url(https://logo.zhuanfou.com/ex_sprites.jpg) 60px 0;
}

#css_logo {
    width: 60px;
    height: 60px;
    background: url(https://logo.zhuanfou.com/ex_sprites.jpg) 0px 60px;
}

#css3_logo {
    width: 60px;
    height: 60px;
    background: url(https://logo.zhuanfou.com/ex_sprites.jpg) 60px 60px;
}
</style>
</head>
<body>

<img src="https://logo.zhuanfou.com/ex_sprites.jpg">
<p>上面这张图是合在一起的那张图，本页只会加载这一张图片，下面的都是根据这一张图片切割出来的。</p>

<!-- img_trans.gif是1*1的白色像素，用来消除边界 -->
<img id="html_logo" src="https://logo.zhuanfou.com/img_trans.gif">
<img id="h5_logo" src="https://logo.zhuanfou.com/img_trans.gif">
<img id="css_logo" src="https://logo.zhuanfou.com/img_trans.gif">
<img id="css3_logo" src="https://logo.zhuanfou.com/img_trans.gif">

</body>
</html>

运行一下

CSS 图片拼合

推广