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