html+css 在图片上添加文字

转载于 2019-09-04 23:50:00 发布 · 6.4k 阅读

12 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guangzhou11/p/11462557.html

本文详细介绍了一种图书卡片的设计方案，使用了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;
}