Html 如何使用文本创建这种类型的背景图像

所以，从一段时间以来，我一直试图用Bootstrap来实现这一点，但我找不到一个有效的方法。也许这比我正在尝试的事情更简单，我不知道了。

---

请提供一些建议。谢谢。

以下是相对容器内绝对定位的基本知识：

相对定位的容器与页面上的其他元素相对。 相对容器边距总是从页面的最后一个元素开始，而不是从整个页面开始

有关相对定位图元的示例，请参见

第二组有一个

top: 0;

属性，但它不在页面的上边框上，而在div1的下边框上

如果我们将div2的位置更改为绝对位置，它将看起来像

我们现在有了一个绝对定位的div，它忽略它的同级并将自己定位在页面级别

对于你的形象，你需要一个相似的方法。尝试将图像包装在具有相对位置的包装div中。您的文本应具有如下绝对位置：

Css:

以及您的html：

<div class="wrapper">
    <img src="http://via.placeholder.com/350x150" />
    <h1>
        I am a header.
    </h1>
    <p>
        I am text.
    </p>
</div>

我是头球手。

我正在发短信。

---

检查此小提琴是否有工作示例：

欢迎使用StackOverflow！到目前为止你试过什么吗？StackOverflow不是一个免费的代码编写服务，它希望您能够这样做。请更新您的问题，以显示您已经尝试过的内容，并显示您在某个应用程序中面临的特定问题。欲了解更多信息，请参阅，然后点击。

<div class="wrapper">
    <img src="http://via.placeholder.com/350x150" />
    <h1>
        I am a header.
    </h1>
    <p>
        I am text.
    </p>
</div>