背景盒子,设置anlinbg=
属性来创建一个背景,它的width
,height
值不是固定的,它会根据父元素的宽度而改变:
<!--创建一个分辨率为400*500的背景-->
<div anlinbg="{width:400,height:500}" style="background:#ff0000;"></div>
<!--创建一个分辨率为500*300的背景-->
<div anlinbg="{width:500,height:300}" style="background:#000000;"></div>
使用图片背景:{'img':'/image/bg1.png'}
设置背景图则无需设置宽度和高度,即使设置了也没有效果,因为它会自动设置成与图片文件相同的尺寸)
<style>
.bgim{background-size:100% auto;background-repeat:no-repeat;}
</style>
<div class="bgim" anlinbg="{img:'/image/bg1.png'}"></div>
<div class="bgim" anlinbg="{img:'/image/bg2.png'}"></div>
正常情况下手机页面比例与电脑页面相差很大,因此你可以设置它的父元素的最大宽度来使电脑适应手机页面,默认没有设置父元素div时它的父元素是body
<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'}"></div>
<div class="bgim" anlinbg="{img:'/image/bg2.png'}"></div>
当背景高度大于宽度时你不可以设置父元素的固定高度,这样可能会使内容高度超出,如需设置你可以给div添加滚动条来防止内容超出
<style>
.bgim{background-size:100% auto;background-repeat:no-repeat;}
.sb{max-width:300px;height:300px;overflow:auto;margin:0 auto;}
</style>
<div class="sb">
<div class="bgim" anlinbg="{img:'/image/bg1.png'}"></div>
</div>
anlinbg
它不能嵌套使用,(如果您仍要嵌套使用,他会覆盖父级div),内容中应该使用anlin=
属性,在下节课程中您将学会怎样使用该属性
以下是不推荐的用法
<div anlinbg="{img:'/bg1.png'}">
<div anlinbg="{img:'/bg2.png'}">
</div>
</div>