文本无法覆盖图片求助：如何实现带彩色背景的文本叠图效果？

你的代码存在三个关键问题，导致文本无法叠加在图片上：

• CSS代码被错误放在<script>标签内，浏览器不会解析该标签里的CSS，需改用<style>标签。
• 样式用的是类选择器（.container、.text-block），但HTML元素用的是id属性，选择器和元素不匹配，样式无法生效。
• 文本块的position设为relative，这种定位不会脱离文档流，无法覆盖在图片上，要改成absolute。

修正后的完整代码：

<body>
    <style>
        #container {
            position: relative;
            font-family: Arial;
        }
        
        #text-block {
            position: absolute;
            bottom: 20px;
            left: 20px;
            padding-left: 20px;
            padding-right: 20px;
            background: rgb(113, 203, 0);
            background: rgba(113, 203, 0, 0.4);
            color: #fff; /* 可选：添加文字颜色，让透明背景下的文字更清晰 */
        }
    </style>
    
    <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>

内容的提问来源于stack exchange，提问作者Joshua