背景盒子,设置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>

如果你添加 .pre-scrollable 类, pre 元素最大的高度 max-height 为 350px ,并生成一个 Y 轴的滚动条:

在 pre 元素中的文本
	宽度的显示与文本的宽度一样,
	保留了  空  格 和

	换行。
	
	

QQ群

友情链接: 百度

鄂ICP备2021014629号-3

2022-11-17更新:已修复图片预览gif动图显示