微信小程序实现页面加入背景图片以及调节透明度

在微信小程序中有时候需要在页面加入背景图片以及调节透明度让我们的小程序变得更加美观，以下是代码实现：

1、WXML

<view class="bg" >
<image class="bg-image" mode="scaleToFill"></image>
</view>

2、WXSS

.bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(' ..图片地址.. ')
no-repeat #000;
background-size:cover;
z-index:-1;
}

.bg-img{
width : 100%;
height : 100%;
}

这样就能加入背景图片啦！

3、调节背景图片透明度

只需要在 WXML 中加入 style=“opacity:{{1}}” 其中花括号里面的数字就是透明度选项，范围是 0-1

<view class="bg"  style="opacity:{{1}}">
<image class="bg-image" mode="scaleToFill"></image>
</view>

大家可以开始自己尝试加入背景图和调节透明度啦！