模板:Sprites/doc
跳到导航
跳到搜索
![]() | 本页介绍的是精灵图模板。关于有限会社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= }}
效果
![](https://img.moegirl.org.cn/topbar/zhMoegirl17summer.jpg)
{{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标签作为“外壳”
![](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)
如有需要,可以这样写:
{{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属性,注意第一个英文引号后面有空格,而且这一行不以引号结尾--> }}
|