如何使用 css 将文本放置在图像上？

Answer 1

将背景作为

#content

的实际背景图像并添加

position: relative

，这样绝对元素将相对于

#content

。

h1.entry-title {
  font: weight 600;
  text-align: center;
}

#content {
  background: url('https://picsum.photos/500/300?grayscale&blur=2') no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 300px;
  position: relative;
}

.SignIn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrapper">
  <div id="content">
    <div class="SignIn">
      <h1 class="entry-title">Sign In</h1>
      <p>Enter your credentials below</p>
    </div>
  </div>
</div>