html+css 在圖片上添加文字

html  

<view class="container">
 <image class="" src="{{book.image}}"></image>
 <view class="description">
 <text class="title">{{book.title}}</text>
 <text class="author">{{book.author}}</text>
 <view class='foot'>
 <text class="footer">{{book.fav_nums}} 喜歡</text>




 </view>
 </view>
</view>

css 

/* component/page/index.wxss */
.container {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-top: 30rpx;
 box-shadow: 2px 2px 3px #e3e3e3e3;
 position: relative;
 width: 240rpx;
 height: 360rpx;
}
.container image{
 width: 100%;
 height: 100%;
 border-radius: 2px;
}
.description {




 width: 100%;
 position:absolute;
 z-index:2;
 left:0;
 bottom:0;
 background-color: white;
}

這裏我們 使用到 position : absolute;同時設置 bottom:0;left:0;  來生成 絕對定位 因為我們這裏   position : absolute 要生效，
相對於 static 定位以外的第一個父元素進行定位  所以我們 設置父元素為相對定位
 

 
轉載於:https://www.cnblogs.com/guangzhou11/p/11462557.html