CSS：指定した色を1つだけ変更しますか？

Question

私はこの問題の解決策を探しています。私はたくさんのビデオと画像を持っています。私は色を変えなければならない。しかし、1つの部分の色だけ。車を見ると、常に同じ写真になりますが、色はCSSによって変更されます。だから私はマゼンタやシアンのような色を使用し、それらを好みの色に変更することができました。

これは可能ですか？

Answer 1

はい、できます。あなたがしなければならないことは、車のイメージを色が変わらないように変更することです。シェーディングを透明な白黒のPNG画像に変更する必要があります。

外側の上のスペースは、例えば、白のために、あなたのウェブサイトの背景と同じになり、固体の色、である必要があります。

私は良いイメージを見つけることができなかったので、私はCSSのいくつかの余分な行を追加しました。しかし、私はあなたがそれを達成する方法を理解すると思います。

は基本的にあなたがする必要があるすべては、ラッパーであなたのイメージを置いています。それらのラッパーの背景色を必要に応じて変更します。イメージの（半）透明度は "車を色づけ"ます。

.icon { 
 
    display: inline-block; 
 
    margin-right: 1em; 
 
    border-radius: 100%; 
 
} 
 
.icon img { 
 
    max-width: 100px; 
 
    display: block; 
 
} 
 
.red { background-color: red; } 
 
.blue { background-color: blue; } 
 
.yellow { background-color: yellow; }

<div class="icon red"><img src="http://freeflaticons.com/wp-content/uploads/2014/10/square-copy-1412171043g4k8n.png" /></div> 
 
<div class="icon blue"><img src="http://freeflaticons.com/wp-content/uploads/2014/10/square-copy-1412171043g4k8n.png" /></div> 
 
<div class="icon yellow"><img src="http://freeflaticons.com/wp-content/uploads/2014/10/square-copy-1412171043g4k8n.png" /></div>