page->html
关于背景图片的设置:
在css文件(外部)中,若要用background-image来指定背景图片,其中,url的地址只能是网络地址,也就是只能的浏览器上的图片或者是服务器上的图片,而不能的本地图片;
方法一
所以我的解决方法是使用<image/>标签,放入到对应要设置background的<div>/<view>(此后称为父元素)中。父元素设置相对定位 position:relative,<image/>设为绝对定位 position:absolute+height=width=100%。
下图为html:
<page>
<view style="height:100%">
<view class="outsideView">
<div class="bg-box">
<image src="../assets/images/index/background.jpg"></image>
</div>
</view>
</view>
</page>
下图为CSS样式:
page{
width:100%;
height:100%;
}
.outsideView{
position:relative;
width:100%;
height:100%;
overflow: hidden;
}
.bg-box{
position:absolute;
width: 100%;
height: 100%;
z-index:-10;
}
注意:100%代表的是 父元素的宽高度的 100%,(宽vw 高vh->窗口的宽高百分比)。所以也可以写为:
.bg-box image{
width: 100vw;
height: 100vh;
}
再啰嗦一句,绝对定位的定义是相对于已经定位的父元素进行定位,而父元素的position值不仅仅只可以为relative,还可以是absolute、fixed。
方法二
回归正题,设置背景图片另一种更加简便直接的方法是 直接使用内联元素!!给栗子:
<view style="background:url(../assets/images/index/background.jpg)">
...
</view>
方法三
突然想起一开始做项目用的就是这个方法,补充一下。
这个方法与方法一类似,只是让图片固定position:fixed;然后让它top、left、bottom、right都为0;但是脱离了正常文档流(absolute也会),在苹果手机上,我发现文档流上的html内容居然可以滑动(安卓滑不动)!而底部的背景图片(已经fixed定位)固定不动,破坏了页面结构,被打回重做QAQ