做点小笔记——关于微信小程序图片设置

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