バックグラウンドイメージをテキストにクリップすると、バックグラウンドにどのように色を追加できますか？

Question

私の背景画像は画像です、私はそれをテキストにクリップします。しかし、私は背景が白であることを望んでいません。どうやって色を変えることができますか？

*{ 
 
    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を見つけました。

Answer 1

単にこのように、あなたのCSSでHTML &体に背景色を追加します。

*{ 
 
    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>

：

html, body { 
    background-color: red; 
} 

ここでは、その結果を見ることができる完全なコードスニペットは、です

Answer 2

フォールバックのデフォルトとして背景色を設定するだけで済みます。

*{ 
 
    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>