微信小程序map、video、canvas地图组件添加覆盖物

微信小程序

在微信小程序中video、map、canvas等组件的层级都最高的 

但是，同样的有一个视图容器可以覆盖在这些“顶级”组件之上的

Video

在video之上添加覆盖物

video{
  width:100%;
  height:500rpx;
}
.cover{
  color:#fff;
  background: #000;
}

效果图

 

Map

在Map地图组件之上添加一个“扫一扫”按钮

map {
  width: 100%;
  height: 500rpx;
}

.cover {
  position: absolute;
  bottom: 50rpx;
  width: 100%;
  display: flex;
  justify-content: center;
}

.scan {
  color: #fff;
  background: #666;
  width: 45%;
  line-height: 1.5;
  text-align: center;
  border-radius: 20rpx;
}

效果图

 

Canvas

  这里是一个覆盖物

canvas {
  width:100%;
  height:500rpx;
}
cover-view{
  position: absolute;
  top:170rpx;
  background: #000;
  color:#fff;
}

效果图