通过顶部的文本获取图像内联和响应

Question

我试图在div内的一行中找到三个没有空格的图像，并在每个图像上显示文本，这些图像将点击进入另一个页面。我理解这个解决方案可能在于两个元素的位置，但我似乎无法让文本保持在正确的图像上。如果有人可以帮助我，那会很棒吗？

以下是HTML。

 <div class="services">
            <div id="text-overlay">
                <img src="Untitled-5.jpg">
                <p>Landscaping</p>
            </div>
            <div id="text-overlay">
               <img src="Untitled-6.jpg">
            </div>
            <div id="text-overlay">
                <img src="Untitled-7.jpg">
            </div>
        </div>

CSS：

#text-overlay {
    position: relative;
}

img {
    display: block;
    width: 33.3333333333%;
    float: left;
    height: 250px;
}

#text-overlay p {
    position: absolute;
    top: 1%;
    left: 1%;
    background-color: firebrick;
    color: white;
    padding: 1%;
}

任何帮助将不胜感激。这是最好的方法吗？还是有更好的选择？

Answer 1

您的代码几乎没有错误：首先，您应该使用唯一的ID作为单独的元素。其次，您应该使用background-image来了解这些条件。请参阅here了解更多详情。

如果您想覆盖图片，请向here学习。