内容定位,使用anlin="{}"属性来设置内容的位置

anlin={x:左右偏移,y:上下偏移,w:宽,h:高,lh:间距,f:字体大小}
w,h,lh,f的值它会父元素大小而改变去适应背景的位置,它不是固定的px值
f可以设置-负数或正数来调整大小
w,h,lh可以设置%,使用百分比必须使用单引号' '或双引号" ",错误的用法:{w:100%}
下列代码中将使用一个背景图和一个糖果图标来演示anlin=属性的使用方法

<style>
.bgim{background-size:100% auto;background-repeat:no-repeat;}
body{max-width:500px;margin:0 auto;}
</style>
<div class="bgim" anlinbg="{img:'/image/bg1.png'}" style="overflow:hidden;">
<!--使用div标签放置一个糖果-->
<div class="bgim" anlin="{x:1,y:1.01,w:80,h:80,lh:80,f:0}" style="background-image:url(/image/tg.png);"></div>
<!--使用img标签放置一个糖果-->
<img anlin="{x:1,y:1.05,w:100,h:100,lh:100,f:0}" src="/image/tg.png">
<!--放置更多的糖果-->
<img anlin="{x:1.808,y:2.035,w:70,h:70,lh:100,f:0}" src="/image/tg.png">
<img anlin="{x:1.562,y:1.027,w:70,h:70,lh:100,f:0}" src="/image/tg.png">
<img anlin="{x:4.404,y:1.429,w:170,h:170,lh:100,f:0}" src="/image/tg.png">
<img anlin="{x:1.663,y:1.425,w:90,h:90,lh:100,f:0}" src="/image/tg.png">
</div>

使用CSS属性z-index来设置堆叠顺序达到理想的效果:

<style>
.bgim{background-size:100% auto;background-repeat:no-repeat;}
body{max-width:500px;margin:0 auto;}
</style>
<div class="bgim" anlinbg="{img:'/image/bg1.png'}" style="overflow:hidden;">
<!--皮卡丘-->
<div class="bgim" anlin="{x:1,y:1.01,w:300,h:300,lh:80,f:0}" style="background-image:url(/image/pkq.png);z-index:1;"></div>
<!--将糖果放在皮卡丘的手上-->
<img anlin="{x:1.510,y:1.211,w:80,h:80,lh:100,f:0}" src="/image/tg.png" style="z-index:2;transform:rotate(50deg);-webkit-transform:rotate(50deg);-moz-transform:rotate(50deg);">
</div>