- 当前 Bug 的表现(可附上截图)
- 预期表现
Canvas画布绘制出来的图形,看起来像是被覆盖在mask之下了,颜色太暗了
- 复现路径
- 提供一个最简复现 Demo
<map class='map'></map>
<cover-view class='mask'></cover-view>
<canvas class="progress_bg" canvas-id="progress_bg"> </canvas>
<canvas class="progress_fg" canvas-id="progress_fg"> </canvas>
.mask {
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
z-index: 6;
position: fixed;
}
.progress_bg {
/* background: floralwhite; */
width: 100%;
height: 40%;
position: fixed;
z-index: 9;
}
.progress_fg {
width: 100%;
height: 40%;
position: fixed;
z-index: 10;
}
.map {
width: 100%;
position: fixed;
z-index: 0;
height: 100%;
}
map cover-view canvas 这几个都是原生组件,z-index 对原生组件不生效,请参考:https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
用 position: absolute; 可以实现,不过有个小缺点,iOS平台整个页面可以拖动,不能固定住