CSSで単語のコラージュ

Question

ゴール：私は、背景画像を半表示するために小さな間隔で単語のコラージュを作成したいと思います。 thisと似ていますが、単語があります。

問題：私は、テキストの背景に画像を追加するたびに、それはあなたがH1にの高さを与えたためですテキスト

.body-container{ 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t position: absolute; 
 
\t left:0; 
 
\t top:0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: #fff; 
 
} 
 
.body-container h1{ 
 
\t padding: 0; 
 
\t margin: 0; 
 

 
\t left:0; 
 
\t top:0; 
 
\t width: 100%; 
 
\t height: 100%; 
 

 
\t display: inline-block; 
 
    font-size: 35px; 
 
    line-height: 34px; 
 
    height: 35px; 
 

 
    
 
    \t background: url(path/to/image) no-repeat; 
 
\t -webkit-background-clip: text; 
 
}

<div class='container body-container'> 
 
\t \t <h1>Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite </h1> 
 

 
\t </div>

Answer 1

の形式で台無し35px。これを削除すると、-webkit-text-fill-color: transparent;が追加されます。私はあなたもh1にあるheight:100%は必要ないと信じています。

.body-container{ 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t position: absolute; 
 
\t left:0; 
 
\t top:0; 
 
\t width: 100%; 
 
\t background-color: #fff; 
 
} 
 
.body-container h1{ 
 
\t padding: 0; 
 
\t margin: 0; 
 
    height:100%; 
 
\t left:0; 
 
\t top:0; 
 
\t width: 100%; 
 

 
\t display: inline-block; 
 
    font-size: 35px; 
 
    line-height: 34px; 
 

 
    -webkit-text-fill-color: transparent; 
 
    \t background: url(http://fillmurray.com/460/300) no-repeat; 
 
\t -webkit-background-clip: text; 
 
}

<div class='container body-container'> 
 
\t \t <h1>Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite </h1> 
 

 
\t </div>