如何在图片上放置文字

Question

我的主页上有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>

Answer 1

在div内包含文本，并使用CSS将div用作图像。 background-image选项，然后在div内插入文本。

HTML

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

css

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