html - 图片上的文字。我似乎无法在图片上显示文字。我尝试了赦免和一切。

Question

图像上的文字。我似乎无法在图片上显示文字。我尝试了赦免和一切。

<div class="wrapper">
<div class="container">
    <div class="row">
            <div class="stages col col-6">
            <a href="..\stage1\index.html" title="Stage 1"><img src="styles\images\stage1.jpg" alt="Stage1"></a>
            <p>Stage 1</p>
            </div>

        <div class="stages col col-6">
        <a href="..\stage2\index.html" title="Stage 2"><img src="styles\images\stage2.jpg" alt="Stage2"></a>
        <p>Stage 2</p>
        </div>
    </div>
</div>

Answer 1

你没有正确应用它。

要让它工作，你需要让父 div 有一个 position:relative; 和子 div 有 position:absolute;

一旦你执行了position:absolute;，你需要通过top、bottom、等属性改变定位left 和 right 带有数值。

以防万一，如果您的文本位于图像下方，您可以使用 z-index 属性将其显示为数值。

例如，

<div class="wrapper">
<div class="container">
    <div class="row" style="position:relative;">
            <div class="stages col col-6">
            <a href="..\stage1\index.html" title="Stage 1"><img src="styles\images\stage1.jpg" alt="Stage1"></a>
            <p style="position:absolute;top: 0;left: 0;">Stage 1</p>
            </div>

        <div class="stages col col-6">
        <a href="..\stage2\index.html" title="Stage 2"><img src="styles\images\stage2.jpg" alt="Stage2"></a>
        <p>Stage 2</p>
        </div>
    </div>
</div>

LIVE DEMO

希望这对您有所帮助。