如何在图像上放置文字[重复]答案

【问题标题】：How to put text over images [duplicate]如何在图像上放置文字[重复]
【发布时间】：2019-05-22 21:53:17
【问题描述】：

我的主页上有 3 张图片，我需要在每张图片的顶部添加文字，所以如何在图片上添加文字

 <div class="container">
                <h2 class="section-title">
                    My clasess
                </h2>

                <div class="owl-carousel visit-carousel">
                    <div class="item">
                        <a href="#" ><img src="assets/images/1.jpeg" alt="visit-image" class="img-responsive visit-item"></a>
                    </div>
                    <div class="item">
                        <a href="#" ><img src="assets/images/2.jpeg" alt="visit-image" class="img-responsive visit-item"></a>
                    </div>
                    <div class="item">
                        <a href="#" ><img src="assets/images/3.jpeg" alt="visit-image" class="img-responsive visit-item"></a>
                    </div>

                </div>
            </div>

【问题讨论】：

标签： html css

【解决方案1】：

在 div 中包含文本，并使用 div 作为您使用 css 的图像。 background-image 选项，然后在 div 中插入您的文本。

HTML

    <div class="image-box">
       <h2>Text Inside</h2>
    </div>

css

    .image-box {
       background-color: #ccc;
       height: 200px;
       width: 200px;
     }

【讨论】：