/* HTML代码 */
<div class="image-with-text">
<img src="image.jpg" alt="图片">
<div class="text">
<p>文本内容</p>
</div>
</div>
/* CSS代码 */
.image-with-text {
position: relative;
}
.image-with-text .text {
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
}首先，在HTML中需要创建一个包含图片和文本框的div容器。大家为该容器添加一个类名“image-with-text”，以便可以在CSS中进行样式设置。
接下来，大家需要在这个div容器中添加两个子元素。第一个子元素是img标签，用来展示图片。第二个子元素是一个div标签，用来展示文本框。大家在这个div标签中添加一个类名“text”，以便可以在CSS中单独设置文本框的样式。
接着，在CSS中设置“image-with-text”类的position属性为relative，这样大家才能为文本框设置绝对定位。然后，大家为“text”类设置position属性为absolute，bottom和left属性为0，这样就可以将文本框放置在图片底部左侧。
最后，大家对“text”类设置样式，如设置background-color（背景色），color（字体颜色），padding（内边距）等。你可以根据自己的需求进行样式设置。
通过这种方式，大家就可以在不影响图片展示的情况下，在图片上方添加一个美观的文本框。这个效果可以用于很多地方，比如在网页中展示产品介绍、图片描述等。