类似如图背景图片底部显示半透明文本view：
image
.wxml
<view class="special-topic">
<image style="width: 100%; height: 350rpx" src="/images/special_pic1.jpg"></image>
<view class="special-topic-content">
<view class="special-topic-content-left">MISS时尚穿搭教程</view>
<view class="special-topic-content-right">192人观看</view>
</view>
</view>
.wxss
.special-topic {
width: 100%;
height: 350rpx;
display: flex;
/* 从最下面开始布局 */
align-items: flex-end;
background: whitesmoke;
position: relative;
}
.special-topic-content {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
height: 80rpx;
background: rgba(0, 0, 0, 1);
opacity: 0.4;
align-items: center;
position: absolute;
}
要点： 父视图的position: relative; 重叠放置在父视图上的视图postion: absolute。
