Template:Sprites：修订间差异
跳转到导航
跳转到搜索
小无编辑摘要 标签：已被回退 |
标签：回退 |
||
| 第1行： | 第1行： | ||
<includeonly>{{#if:{{{thumbcaption|}}}|<div class="image-box" style="{{#if:{{{center|}}}|margin: auto;|display:inline-block;}}width:{{{width|}}};height:{{#expr:{{replace|str={{{height|}}}|ptn=px|rep=}}+25}}px;position:relative;border:1px solid #ccc;background-color:#f9f9f9;">{{Sprites/inside|pic={{{pic|}}}|width={{{width|}}}|height={{{height|}}}|x={{{x}}}|y={{{y}}}|link={{{link|}}}|style= |
<includeonly>{{#if:{{{thumbcaption|}}}|<div class="image-box" style="{{#if:{{{center|}}}|margin: auto;|display:inline-block;}}width:{{{width|}}};height:{{#expr:{{replace|str={{{height|}}}|ptn=px|rep=}}+25}}px;position:relative;border:1px solid #ccc;background-color:#f9f9f9;">{{Sprites/inside|pic={{{pic|}}}|width={{{width|}}}|height={{{height|}}}|x={{{x}}}|y={{{y}}}|link={{{link|}}}|style={{{style|}}}}}<div class="thumbcaption" style="position:absolute;width:calc(100% - 6px);bottom:0px;overflow:inherit;">{{{thumbcaption|}}}</div></div>|{{Sprites/inside|pic={{{pic|}}}|width={{{width|}}}|height={{{height|}}}|x={{{x}}}|y={{{y}}}|link={{{link|}}}|style={{{style|}}}}}}}</includeonly><noinclude>{{Doc}}[[分类:技术性模板]]</noinclude> |
||
2023年9月6日 (三) 12:42的最新版本
简介
该模板用于在页面中添加雪碧图（CSS Sprites，或精灵图），可以用于显示大量小图片，而提高图片的加载速度，减少文件获取所消耗的资源。一般可用于展示字母表等需要大量图片的场合。
用法
要使用这个模板可以采取以下的输入格式。
{{Sprites
|pic=图片文件名.jpg
|width=尺寸px
|height=尺寸px
|x=偏移px
|y=偏移px
|link=链入
|thumbcaption=提示语内容
|center=如果居中则填true（无thumbcaption不可用）
|style=额外格式css（不建议）
}}
示例
{{Sprites
|pic=寿险精算数学.png
|width=182px
|height=166px
|x=2px
|y=4px
}}
{{Sprites
|pic=寿险精算数学.png
|width=182px
|height=166px
|x=2px
|y=4px
|thumbcaption=内容
}}
内容
{{Sprites
|pic=寿险精算数学.png
|width=182px
|height=166px
|x=2px
|y=4px
|thumbcaption=内容
|center=true
}}
内容