微信小程序里面怎么设置图片遮板

图片如下所示

下面的55万步这里黑色的透明条是怎么实现的

你问题的描述不够清晰，是具体全部实现，，还是问的只是透明这一问题？ 请你详细描述一下问题
把那个对应的标签设置透明度就可以了。

wxml文件中 ：style="opacity:{{0.5}}"

https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

你的思路是对的，我曾经做过类似的效果，简单的说就是把透明条用absolute来定位就行了

絕對定位 先用 相對定位再用絕對定位 就可以了
wxml

        <view class="globel-body">
    <navigator wx:for="{{funny}}" wx:key class="body" url="../nav/nav?id={{item.id}}">
      <image src="{{item.littlepic}}"></image>
      <text class="onclick">{{item.onclick}}人在玩</text>
    </navigator>
  </view>


    wxss
    .body {
    display: flex;
    flex-direction: column;
    width: 47%;
    position: relative;
    margin: 0 8px 12px 0;
}

.body image {
    width: 100%;
    height: 80px;
    border-radius: 10px;
}

.onclick {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    border-radius: 0 0 10px 10px;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 13px;
    padding: 2px 0;
}