模板:Sprites

来自希灵百科
星臣讨论 | 贡献2017年1月17日 (二) 21:30的版本 (星臣移动页面Sprites模板:Sprites,不留重定向)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转至: 导航搜索

本模板尝试实现提问求助区关于CSS Sprites的功能。

50px 模板文档  [查看] [编辑] [历史] [刷新]

简介

这是一个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=
}}