微信小程序

---

微信小程序实现调节背景图片的透明度

---

1. index.wxml页面

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

opacity属于设置透明度的api，其取值范围为0-1。
详情见微信小程序官方文档
https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.opacity.html

2. index.wxss页面

.bg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url('https://7775-wukong-bd1af-1301855714.tcb.qcloud.la/ca33912900eef33479188c8976a6c0ac.jpg?sign=48377f7e6e8cdb9481cff5c53a53f421&t=1591344376') 
  no-repeat #000;
  background-size:cover;
  z-index:-1;
  }
  
  .bg-img{
      width : 100%;
      height : 100%;
  }
  

3. 最后的效果图如图所示：