「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={{{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> |
<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年4月14日 (五) 20:33 的修訂
簡介
該模板用於在頁面中添加雪碧圖（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
}}
內容