拼图

来自bilibili游戏中心 - WIKI
跳到导航 跳到搜索
页面贡献者 :
顾小满real

说明

  • 通过相对定位和绝对定位组合各种图片素材以达到游戏中实际的UI效果的方式。
  • 手上难度:中。样例代码需要根据实际素材的变化进行调整大小,调整位置和增加层级,需要对定位和层级有一定的了解,通过复制粘贴不能直接达到想要的效果。

样例

拼图.png

代码

<div style="position:relative;overflow:hidden;display:inline-block;width:110px;height:120px;float:left;margin-right: 1%;">
<div style="position:absolute;">
[[file:box{{#switch:{{{3}}}|普通=1|稀有=2|超稀有=3|超绝稀有=4}}.png|center|110px|link=]]
</div>
<div style="position:absolute;overflow:hidden;top:17px;left:17px">[[文件:{{{4}}}.png|70px|link={{{2}}}]]</div>
<div style="position:absolute;top:88px;width:100%;text-align:center">[[{{{2}}}|<font style="color:#fff;font-size:12px">{{{2}}}</font>]]</div>
<div style="position:absolute;overflow:hidden;top:0px;left:0px">[[文件:空白.png|110px|link={{{2}}}]]</div>
</div>