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>

Javascript 中的背景图像截断了部分文本？

Background image cutting off part of text in Javascript?

html

css

text