如何在將背景圖像剪切到文本時爲背景添加顏色？

我的背景圖片是一張圖片，我將其剪輯爲文本。但我不想現在的背景變成白色。那麼我怎樣才能改變它到不同的顏色？如何在將背景圖像剪切到文本時爲背景添加顏色？

*{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
/*Centering*/ 
 
html,body{ 
 
    height:100%; 
 
    overflow:hidden; 
 
} 
 
.box{ 
 
    height:100%; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 
/*Clip text*/ 
 
.item{ 
 
    font-size:250px; 
 
} 
 
.box{ 
 
    background: url('https://media.timeout.com/images/103444978/image.jpg') repeat; 
 
    color:#21537a;/*text color for nonwebkit*/ 
 
    -webkit-text-fill-color: transparent; 
 
    background-size:cover; 
 
    -webkit-background-clip:text; 
 
    
 
}

<div class='box'> 
 
    <div class='item'>NYC</div> 
 
</div>

My project on Code Pen

我發現這種技術here。

來源

2017-08-07 user132522

一個簡單的背景顏色添加到HTML &身體在你的CSS，像這樣：

html, body { 
    background-color: red; 
}

下面是完整的代碼片段，在這裏你可以看到的結果是：

*{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
/*Centering*/ 
 
html,body{ 
 
    height:100%; 
 
    overflow:hidden; 
 
    background-color: red; 
 
} 
 
.box{ 
 
    height:100%; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 
/*Clip text*/ 
 
.item{ 
 
    font-size:250px; 
 
} 
 
.box{ 
 
    background: url('https://media.timeout.com/images/103444978/image.jpg') repeat; 
 
    color:#21537a;/*text color for nonwebkit*/ 
 
    -webkit-text-fill-color: transparent; 
 
    background-size:cover; 
 
    -webkit-background-clip:text; 
 
    
 
}

<div class='box'> 
 
    <div class='item'>NYC</div> 
 
</div>

來源

2017-08-07 19:14:05

它爲什麼這樣做呢？添加背景顏色到html而不是box類。 – user132522

將背景顏色添加到框類不起作用，因爲將'-webkit-background-clip'屬性設置爲'text'將背景屬性設置爲文本，所以background屬性和background-color屬性box類只適用於box類中的文本，而不適用於div的全部區域。這就是爲什麼「NYC」文本有一個花哨的背景，但整個div沒有，因爲它是從背景剪輯到背景的屬性中提供的。 –

你只需要設置一個背景顏色作爲後退默認值。

*{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
/*Centering*/ 
 
html,body{ 
 
    height:100%; 
 
    overflow:hidden; 
 
    background-color:yellow; /* Default background color */ 
 
} 
 
.box{ 
 
    height:100%; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 
/*Clip text*/ 
 
.item{ 
 
    font-size:250px; 
 
} 
 
.box{ 
 
    background: url('https://media.timeout.com/images/103444978/image.jpg') repeat; 
 
    color:#21537a;/*text color for nonwebkit*/ 
 
    -webkit-text-fill-color: transparent; 
 
    background-size:cover; 
 
    -webkit-background-clip:text; 
 
    
 
}

<div class='box'> 
 
    <div class='item'>NYC</div> 
 
</div>

來源

2017-08-07 19:14:49

如何在將背景圖像剪切到文本時爲背景添加顏色？

回答

相關問題