html+css 在图片上添加文字

html  

class="container">
    class="" src="{
      {book.image}}">
    class="description">
        class="title">{
     {book.title}}
        class="author">{
     {book.author}}
        class='foot'>
            class="footer">{
     {book.fav_nums}}  喜欢
        
    

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