html - 带有文本的背景图像

Question

我的目标是得到这样的结果:

现在，我希望文本位于背景图像中。我认为我的问题可能出在我的 block HTML 中？

这是一个概述

.background_grey {
  height: 70px;
  width: 100%;
  margin-top: 0px;
  position: relative;
}

.page_title {
  font-size: 14px;
}

<img class="background_grey" src="images/subtle_grunge.png" />
<div class="page_title">Register <span class="hometxtcolor">an Account</span></div>

感谢您的帮助!

Answer 1

您必须通过 CSS 使用背景图片，而不是来自 img 元素:

.page_title {
  background-image: url(images/subtle_grunge.png);
}

<div class="page_title">
  Register
  <span class="hometxtcolor">
          an Account
        </span>
</div>