模板:Sprites/doc

星臣讨论 | 贡献2017年1月18日 (三) 20:32的版本
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)

简介

这是一个CSS Sprites模板。

CSS Sprites是一种用来显示大量小图片,同时提高加载速度的一种方式。它把所有的小图片集合在一张大图上,然后限定每张小图的长宽和相对大图的位置,来显示这张小图片。不管显示多少张小图片,都只需加载这一张大图,节省了网络流量,同时充分利用了缓存,提高了加载速度。


用法

对于外链图片:

{{Sprites
|pic=http://ww4.sinaimg.cn/large/6d956152jw1ev603hnk0qj20f60duad9.jpg
|width=182px<!--单块图片的大小-->
|height=166px
|x=182px<!--子图片相对于大图左上角的位置-->
|y=334px
|link=
}}

对于内部图片:

{{Sprites
|pic=图片文件名.jpg
|width=182px<!--单块图片的大小-->
|height=166px
|x=182px<!--子图片相对于大图左上角的位置-->
|y=334px
|link=
}}

效果

<img src="http://ww4.sinaimg.cn/large/6d956152jw1ev603hnk0qj20f60duad9.jpg" style="max-width:none!important;"/>
{{Sprites
|pic=http://ww4.sinaimg.cn/large/6d956152jw1ev603hnk0qj20f60duad9.jpg
|width=182px
|height=166px
|x=182px
|y=334px
|link=
}}