回答:
あなたはでフィルタを使用することができます-webkit-filterし、filter：フィルタは、以下のCanIUseテーブルに従って、ブラウザの90％以上でブラウザに比較的新しいですが、サポート：https://caniuse.com/#feat=css-filters
画像をグレースケール、セピアなどに変更できます（例をご覧ください）。
したがって、フィルターを使用してPNGファイルの色を変更できます。
body {
background-color:#03030a;
min-width: 800px;
min-height: 400px
}
img {
width:20%;
float:left;
margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://www.pexels.com/photo/photo-of-a-green-leaf-2563743/?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">.gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }、黒と透明またはグレースケールからカラーに移行でき、アニメーションgifでも機能します
16進数の色の値を挿入し、この色をpngに適用するために必要なフィルターを返す、この素晴らしいコードペンの例を見つけました
黒からターゲットの16進数の色に変換するCSSフィルタージェネレーター
たとえば、私は私のpngに次の色を付ける必要がありました＃1a9790
次に、あなたはpngに次のフィルターを適用する必要があります
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);
アイコンフォントを確認することをお勧めします。http://css-tricks.com/examples/IconFont/
編集：私は最新のプロジェクトでFont-Awesomeを使用しています。ブートストラップすることもできます。これを単にあなたに入れてください<head>：
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">
次に、次のようなアイコンリンクを追加します。
<a class="icon-thumbs-up"></a>これが完全なチートシートです
-編集-
Font-Awesomeは新しいバージョンで異なるクラス名を使用します。これにより、CSSファイルが大幅に小さくなり、あいまいなcssクラスが回避されます。だから今あなたは使うべきです：
<a class="fa fa-thumbs-up"></a>編集2：
githubも独自のアイコンフォントを使用していることがわかりました：Octicons ダウンロードは無料です。また、独自のアイコンフォントを作成するためのヒントもあります。
SVGフィルターを使用してこれを行うことができました。ソース画像の色を、変更したい色で乗算するフィルターを作成できます。以下のコードスニペットでは、flood-colorは画像の色を変更する色（この場合は赤）です。feCompositeはフィルターに色の処理方法を指示します。算術演算を含むfeCompositeの式は、（k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4）です。ここで、i1とi2は、in / in2の入力カラーです。したがって、k1 = 1のみを指定すると、i1 * i2だけが実行されます。つまり、両方の入力カラーを乗算します。
注：これはインラインSVGを使用しているため、HTML5でのみ機能します。しかし、SVGを別のファイルに置くことで、古いブラウザーでこれを機能させることができると思います。私はまだそのアプローチを試していません。
これがスニペットです：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask1">
<feFlood flood-color="#ff0000" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask2">
<feFlood flood-color="#00ff00" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask3">
<feFlood flood-color="#0000ff" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>imgタグには、他と同じようにbackgroundプロパティがあります。ステンシルのような透明な形状の白いPNGがある場合、これを行うことができます：
<img src= 'stencil.png' style= 'background-color: red'>はい ：）
Surfin 'Safari-ブログアーカイブ»CSSマスク
WebKitはCSSでアルファマスクをサポートするようになりました。マスクを使用すると、ボックスのコンテンツを、最終的な表示でそのボックスの一部をノックアウトするために使用できるパターンでオーバーレイできます。つまり、画像のアルファに基づいて複雑な形状にクリップできます。
[...]
新しいプロパティを導入して、Webデザイナーにこれらのマスクとそれらの適用方法に対する多くの制御を提供します。新しいプロパティは、既存の背景とborder-imageプロパティに類似しています。-webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)
ではほとんどのブラウザは、フィルタを使用することができます。
<img>要素と他の要素の背景画像の両方
CSSで静的に設定するか、JavaScriptを使用して動的に設定します
以下のデモをご覧ください。
<img> 要素この手法は<img>要素に適用できます。
#original, #changed {
width: 45%;
padding: 2.5%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />
<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />この手法は背景画像に適用できます。
#original, #changed {
background: url('http://i.stack.imgur.com/kaKzj.jpg');
background-size: cover;
width: 30%;
margin: 0 10% 0 10%;
padding-bottom: 28%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}<div id="original"></div>
<div id="changed"></div>JavaScriptを使用して、実行時にフィルターを設定できます。
var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;#original, #changed {
margin: 0 10%;
width: 30%;
float: left;
background: url('http://i.stack.imgur.com/856IQ.png');
background-size: cover;
padding-bottom: 25%;
}<div id="original"></div>
<div id="changed"></div>hue-rotate白では機能しません。
私がこれに対する解決策を持っていると思います：a）あなたが5年前に探していたものであり、b）ここにある他のコードオプションよりも少し単純です。
白のpng（透明な背景の白いアイコンなど）では、:: afterセレクターを追加して色を変更できます。
.icon {
background: url(img/icon.png); /* Your icon */
position: relative; /* Allows an absolute positioned psuedo element */
}
.icon::after{
position: absolute; /* Positions psuedo element relative to .icon */
width: 100%; /* Same dimensions as .icon */
height: 100%;
content: ""; /* Allows psuedo element to show */
background: #EC008C; /* The color you want the icon to change to */
mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}次のコードペンを参照してください（ホバー時にカラースワップを適用）：http ://codepen.io/chrscblls/pen/bwAXZO
私のために働いた最も単純な1行：
filter: opacity(0.5) drop-shadow(0 0 0 blue);不透明度を0から1に調整して、色を明るくしたり暗くしたりできます。
私はグーグルでこれを見つけました、私は私のために最もよく働くことを見つけました...
HTML
<div class="img"></div>CSS
.img {
background-color: red;
width: 60px;
height: 60px;
-webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}特定の色が必要だったので、フィルターが機能しませんでした。
代わりに、CSSの複数の背景画像と線形グラデーション関数（画像自体を作成する）を利用してdivを作成しました。オーバーレイブレンドモードを使用する場合、実際の画像は、目的の色を含む生成された「グラデーション」画像とブレンドされます（ここでは、＃BADA55）。
.colored-image {
background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
background-blend-mode: overlay;
background-size: contain;
width: 200px;
height: 200px;
}<div class="colored-image"></div>これに対する解決策を探していたので答えました。
@chrscblls回答のペンは、背景が白または黒の場合にうまく機能しますが、私の場合はそうではありませんでした。また、画像はng-repeatで生成されたため、CSSにURLを含めることができず、imgタグで:: afterを使用できません。
それで、私は回避策を考え出し、人々がここでつまずきすぎても人々に役立つかもしれないと思いました。
だから私がしたことは3つの主な違いはほとんど同じです：
黒から白または白から黒に変更するには、背景色を白にする必要があります。黒からカラーまで、どんな色でも選べます。白から色まで、必要な色とは反対の色を選択する必要があります。
.divClass{
position: relative;
width: 100%;
height: 100%;
text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
position: absolute;
width: 100%;
height: 100%;
background: #FFF;
mix-blend-mode: difference;
content: "";
}アイコンが1つだけ必要な場合は、フォントセット全体を使用する必要はありません。さらに、個々の要素としては「クリーン」であると感じています。したがって、この目的のために、HTML5ではSVGをドキュメントフロー内に直接配置できます。次に、.CSSスタイルシートでクラスを定義し、fillプロパティでその背景色にアクセスできます。
作業フィドル：http : //jsfiddle.net/qmsj0ez1/
この例で:hoverは、動作を説明するために使用したことに注意してください。「通常」の状態の色を変更するだけの場合は、疑似クラスを削除する必要があります。
画像を黒から白、または白から黒に変更する場合、白黒は技術的には色ではないため、色相回転フィルターは機能しません。代わりに、黒と白の色の変更（黒から白、またはその逆）は、反転フィルタープロパティで行う必要があります。
.img1 {
filter: invert(100%);
}
body{
background: #333 url(/images/classy_fabric.png);
width: 430px;
margin: 0 auto;
padding: 30px;
}
.preview{
background: #ccc;
width: 415px;
height: 430px;
border: solid 10px #fff;
}
input[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
width: 25px;
height: 25px;
margin: 5px 0 5px 5px;
background-size: 225px 70px;
position: relative;
float: left;
display: inline;
top: 0;
border-radius: 3px;
z-index: 99999;
cursor: pointer;
box-shadow: 1px 1px 1px #000;
}
input[type='radio']:hover{
-webkit-filter: opacity(.4);
filter: opacity(.4);
}
.red{
background: red;
}
.red:checked{
background: linear-gradient(brown, red)
}
.green{
background: green;
}
.green:checked{
background: linear-gradient(green, lime);
}
.yellow{
background: yellow;
}
.yellow:checked{
background: linear-gradient(orange, yellow);
}
.purple{
background: purple;
}
.pink{
background: pink;
}
.purple:checked{
background: linear-gradient(purple, violet);
}
.red:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
filter: opacity(.5) drop-shadow(0 0 0 red);
}
.green:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
filter: opacity(.5) drop-shadow(0 0 0 green);
}
.yellow:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
.purple:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
filter: opacity(.5) drop-shadow(0 0 0 purple);
}
.pink:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
filter: opacity(.5) drop-shadow(0 0 0 pink);
}
img{
width: 394px;
height: 375px;
position: relative;
}
.label{
width: 150px;
height: 75px;
position: absolute;
top: 170px;
margin-left: 130px;
}
::selection{
background: #000;
}<div class="preview">
<input class='red' name='color' type='radio' />
<input class='green' name='color' type='radio' />
<input class='pink' name='color' type='radio' />
<input checked class='yellow' name='color' type='radio' />
<input class='purple' name='color' type='radio' />
<img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>
background-colorCSSプロパティを設定できます。固定される非透明部分と、CSSを介して任意の色で塗りつぶされる画像の透明部分を作成できます。それはあなたが達成したいことですか？