文字不与图片重叠答案

【问题标题】：Text not overlapping image文字不与图片重叠
【发布时间】：2022-12-06 06:22:44
【问题描述】：

由于某种原因，文本没有覆盖图像。我正在尝试让文本与彩色背景重叠。有谁知道为什么它不起作用？

    <body>
        <script>
        
            .container {
                position: relative;
                font-family: Arial;
                }
                
            .text-block {
                position: relative;
                bottom: 20px;
                left: 20px;
                padding-left: 20px;
                padding-right: 20px;
                background: rgb(113, 203, 0);
                background: rgba(113, 203, 0, 0.4);
                }
                
        </script>
        
        <div id="container">
            <img src="img1.png" alt="Execution" >
            <div id="text-block">
                <h1>Plan D</h1>
                <p>Lorem ipsum's plan is to remain ambiguous text.</p>
            </div>
        </div>
        
    </body>

W3schools.com、拼写错误等

【问题讨论】：

代码的哪一部分没有按预期工作？我没有看到任何会使文本和图像重叠的内容。此外，一些图像会有所帮助，以说明您所看到的以及您想要实现的目标。
@LawrenceWebDev link 这就是我正在尝试的，但文本只是位于图像下方。
您的代码和链接到的代码虽然不同。你的 .text-block CSS 有 position: relative; 而不是 position: absolute;
你是对的。我继续将该属性更改为绝对属性，但仍然没有看到任何变化。我觉得我已经将代码与 W3school 的代码进行了十多次比较，但我仍然找不到我做错了什么。

标签： html css

【解决方案1】：

您的文本块元素具有 text-block 的 id，而不是 class。所以 CSS 选择器 .text-block 不适用于它。与您的容器相同。

您的 <script> 标签应该改为 <style> 标签。

【讨论】：

稳固的修正，但问题仍然存在。这并没有解决问题。