微信小程序15__view 层叠展示_微信小程序图片重叠在一起

先看效果图：

对应wxml布局：

<view class="special-topic">
      <image style="width: 100%; height: 350rpx" src="../../images/pic2.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>
    
 
    <view class="special-topic">
      <image style="width: 100%; height: 350rpx" src="../../images/pic2.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;
 
  border-bottom: 1px solid orange;
  margin-top:5px;
}
 
.special-topic-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 120rpx;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0.6;
  align-items: center;
  position: absolute;
 
}
.special-topic-content-left{
  color:#ffffff;
  margin-bottom:40px;
}
 
.special-topic-content-right{
  color:blue;
  margin-bottom:40px;
  margin-right:10px;
  font-size: 20px;
}