在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>