拼接單詞與CSS

目標：我想創建一個小間距的單詞拼貼，以便半顯示背景圖像。與this類似的東西，但帶有文字。拼接單詞與CSS

問題：每當我的圖像添加到文本的背景下，與文本的格式打亂

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

來源

2017-08-15 John Mason

「它與文本的格式攪亂」 - 你是什麼意思？ – 2017-08-15 19:59:00

http://imgur.com/a/41GUL第一個是添加圖像，第二個沒有。 –

那麼你想達到什麼目的，你可以編輯你的代碼，並把圖像，使我們可以形象化？ – 2017-08-15 20:09:07

這是因爲你給了H1的高度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>

來源

2017-08-15 20:11:43

幹得好。謝謝 – 2017-08-15 20:26:07

拼接單詞與CSS

回答

相關問題