所谓的图片拼合技术就是把很多张常用的图片拼合在一张图片上,然后网页中只加载这一张图片,具体要用的时候,直接从这张图片里截取要显示的部分就ok啦~
这种方式的好处就是加速,避免同时加载很多张图片而耗费时间。而且这种方式能减少客户端与服务器的连接数。
但是呢,但是呢,但是呢,
但是时代不一样了,图片拼合技术早就过时了,那都是贫道小学时期所流行的技术,那时靠一根电话线拨号上网,加载一个页面就像挤牙膏一样。现在这个时代,带宽提高,图片都会直接用第三方专用的图片类云服务器外加cdn,根本不存在那些问题了。所以不必学习与运用这种奇技淫巧来追求图片加载速度了。
因为是过时的技术了,看看例子就好了,不必认真学了。
试一下,然后就可以结束本小节的学习了。
<!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>