置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板:Sprites/doc

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋

本模板嘗試實現提問求助區關於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.org.cn/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.org.cn/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属性,注意第一个英文引号后面有空格,而且这一行不以引号结尾-->
}}