拼图

首页 > 拼图

丨说明

通过相对定位和绝对定位组合各种图片素材以达到游戏中实际的UI效果的方式
对于图鉴内容较多的Wiki，不再需要逐一制作图片，大幅减少制图同学的工作量
样例代码需要根据实际素材的变化进行调整大小，调整位置和增加层级，需要对定位和层级有一定的了解
通过复制粘贴不能直接达到想要的效果，需要自行进行多次练习调整

丨示例

丨参考代码

<!-- 背景 -->  <div class="ping1" style="">[[文件:pintu-bg2.png|116px|link=]]

<!-- 人物 --> <div class="ping2" style="left:-65px;bottom:-30px">[[文件:li_c{{{8|}}}_00_s.png|240px|link=]]</div>

<!-- 属性 -->  <div class="ping2" style="left:1px;top:30px">[[文件:{{{5|}}}.png|26px|link=]]</div>

<!-- 属性 -->  <div class="ping2" style="left:1px;top:58px">[[文件:{{{4|}}}.png|26px|link=]]</div>

<!-- 属性 -->  <div class="ping2" style="left:1px;top:88px">[[文件:爆裂阶段-{{{9|}}}.png|22px|link=]]</div>

<!-- 底部小蒙板 -->   <div class="ping2" style="left:0px;bottom:10px">[[文件:蒙版1.png|116px|link=]]</div>

<!-- 属性 -->   <div class="ping2" style="left:60px;bottom:5px">[[文件:{{{6|}}}{{{3|}}}.png|55px|link=]]</div>

<!-- 底边 -->  <div class="ping2" style="left:0px;bottom:0px">[[文件:{{{3|}}}底边1.png|116px|link=]]</div>

<!-- 底边 -->  <div class="ping2" style="left:0px;bottom:15px">[[文件:pt{{{3|}}}.png|50px|link=]]</div>

<!-- 名字 -->   <div style="position:absolute;right:2px;bottom:3px;width:100%;text-align:right;><font style="color:#fff;font-size:15px;font-weight:bold;text-shadow:2px 2px 2px #000">{{{2|}}}</font></div>

<!--整面大蒙板 -->  <div style="position: absolute;bottom:5px">[[文件:蒙版.png|link={{{2|}}}]]</div>
</div>