html+css如何在图片上添加文字

Posted 2023-04-04

可以。

以html为例，步骤：

一、在body中建立文字信息以及图片内容，也就是在header中包含两个同级，图片和文字。

二、在CSS中对文字图片进行简单样式添加，效果如图所示；大盒子使用描边显示，里面包含了图片和下面的文字。

三、想要将文字弄到画面上去，这时候需要对header添加相对定位，对文字标签p添加绝对定位。

四、对文字添加了绝对定位后，如图效果，然后就需要对其设置下位置关系了。

五、位置关系通常就是top  bottom left right 上下左右四个方向了，最后完成了。

参考技术A

绝对定位了解一下。

<div class="box">
    <img src="图片路径">
    <p>我是文字我是文字</p>
</div>

.boxposition:relative; width:500px;
.box imgwidth:100%;
.box pposition:absolute;width:300px;height:60px;left:100px;bottom:0px;

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 定位以外的第一个父元素进行定位  所以我们 设置父元素为相对定位