使图像内联并响应顶部的文本答案

【问题标题】：Getting images inline and responsive with a text over the top使图像内联并响应顶部的文本
【发布时间】：2017-02-06 21:01:46
【问题描述】：

我试图在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%;
}

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

【问题讨论】：

你应该使用图像作为你的 div 的背景
从学习基础知识开始，例如 ID 在 HTML 文档中必须是唯一的。

标签： html css image text css-position

【解决方案1】：

您的代码几乎没有错误：首先，您应该对独立元素使用唯一的ID。其次，您应该对这些条件使用background-image。有关详细信息，请参阅here。

如果你想覆盖图像，请向here学习。

【讨论】：