微信小程序15__view 层叠展示

109905418

已于 2022-11-04 18:06:06 修改

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小程序基础文章标签：微信小程序前端小程序

于 2021-07-17 00:41:08 首次发布

本文链接：https://blog.youkuaiyun.com/aduovip/article/details/118835716

小程序基础专栏收录该内容

23 篇文章

订阅专栏

本文展示了一种使用WXSS实现的图片与文字布局效果。通过设置特殊的样式属性，如定位、背景颜色及透明度等，实现了图片底部叠加文字的效果，并保持了良好的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图：

对应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;
}