背景图片在Javascript中切断部分文字？

Question

我有一个简单的背景图片，我在其上覆盖文字。但是，文本的第一部分是粗体，由图像截断，如下所示。 我试过删除<strong>标签，但无济于事。我还添加了z-index属性，认为图像覆盖了文本，这也没有产生任何结果。

我需要做些什么来防止我的文字被隐藏？

.image {
  position:absolute;
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background-image: url(https://static.pexels.com/photos/23049/pexels-photo.jpg);
  background-repeat: no-repeat;
  z-index:0;
}
#faded {
  opacity: 0.7;
  font-size: 50px;
  margin-left: 7px;
}
#large {
  font-size: 55px;
  display:inline-block;
  z-index:1;
}

<div class="image"></div>

<div class="title">
    <p class="titleText">
        <span id="large"><strong>We aspire</strong></span>
        <span id="faded">to match individuals with the jobs they need</span>
    </p>
</div>

结果图片：

Answer 1

您需要将position: relative;添加到#large容器

请参阅下面的代码段

.image {
  position:absolute;
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQI0475wfDXQzGz3vS0MvnUcYgj3Do5YBW2Uf19mEpm-pngoM_E);
  background-repeat: no-repeat;
  z-index:0;
  background-size:cover;
}

#faded {
  opacity: 0.7;
  font-size: 50px;
  margin-left: 7px;
}

#large {
  font-size: 55px;
  display:inline-block;
  z-index:1;
  position: relative;
}

<div class="image"></div>

<div class="title">
    <p class="titleText">
        <span id="large"><strong>We aspire</strong></span>
        <span id="faded">to match individuals with the jobs they need</span>
    </p>
</div>