Question

所以，有一段时间我试图用Bootstrap来做这件事，但我找不到一种有效的方法。也许这比我正在尝试的东西更简单，我不知道了。 https://imgur.com/uZkCChn 请提出一些建议。谢谢。

Answer 1

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

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

有关相对定位元素的示例，请参阅https://jsfiddle.net/kknfLfh5/。

div2有一个

top: 0;

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

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

我们现在有一个绝对定位的div，它忽略了它的兄弟姐妹，并在页面级别上定位。

使用您的图像，您需要一种类似的方法。尝试将图像包装在具有相对定位的包装器div中。你的文字应该有这样的绝对定位：

的CSS：

.wrapper{
position: relative;
display: inline-block;
}

img{
position: relative;
height: 100%;
width: 100%;
}

h1{
  position: absolute;
  left: 0;
  top: 0;
}

p{
position: absolute;
right: 0;
top: 10px;
}

和你的html：

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

检查这个小提琴是否有工作样本：https://jsfiddle.net/4osq7tqo/

如何使用文本创建此类背景图像

1 个答案: