 | 本頁介紹的是精靈圖模板。關於有限會社Axcel旗下品牌sprite遊戲作品的大家族模板，請見「Template:Sprite」。 |
|---|
本模板嘗試實現提問求助區關於CSS Sprites的功能。
簡介
這是一個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=
}}
效果
{{Sprites
|pic=https://img.moegirl.tw/topbar/zhMoegirl17summer.jpg
|width=182px
|height=166px
|x=182px
|y=334px
|link=
}}
值得注意的是，在模板外套加諸如<div style="border-radius:50%;box-shadow:1px 1px 1px 1px rgba(0,0,0,0.45)"> </div>
之類的並不能達到下面的效果，因為模板以div標籤作為「外殼」
如有需要，可以這樣寫：
{{Sprites
|pic=https://img.moegirl.tw/common/7/7d/%E5%B4%A9%E5%9D%8F3%E5%BF%83%E4%B9%8B%E5%9B%9E%E5%BF%863.png
|width=150px;border-radius:50%;box-shadow:1px 1px 1px 1px rgba(0,0,0,0.45)
|height=150px
|style=border-radius:50%;box-shadow:1px 1px 1px 1px rgba(0,0,0,0.45) <!--這裡添加額外的CSS屬性，請不要填入引號-->
|x=300px
|y=40px
|link=布洛妮婭·扎伊切克" title="布洛妮婭·禮物 <!--雖然不建議這樣寫，但這裡確實可以填入html屬性，注意第一個英文引號後面有空格，而且這一行不以引號結尾-->
}}
| |||||||||||||||||||||||||||||||||