背景画像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

あなたは

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

以下 position: relative; #largeにコンテナ

参照スニペットを追加する必要があります10