在文字前放置一个文字

Question

我刚开始在codecademy学习代码，并完成了练习，但我想进行实验，以便完全理解代码及其工作原理。

右侧的网页有section class="jumbotron＆＃34;以图像为背景，大小设置为覆盖。我发现很容易在它前面放置一个文本，因为它是一个背景。

在此之下，figure class="col-sm-6"内有4个图像和文字，第1项为段，方形图像为图（每个div行为2个） ）我希望将文本第1项，第2项放在图像中并居中放置。

它是如何运作的？

Answer 1

div {
  background: url("https://upload.wikimedia.org/wikipedia/commons/0/0e/Tree_example_VIS.jpg");
  background-size: cover;
  position: relative;
  height: 450px;
  width: 600px;
}
span {
  background-color: rgba(255, 255, 255, 0.5);
  bottom: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

<div>
  <span>Example</span>
</div>

position: absolute上的{p> span使其相对于最近的祖先定位。

bottom: 0将我们的文字置于底部，text-align: center将其置于中心位置。