html - 背景图像切断了 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>