皆さん。CSS - 白黒PNG画像にフィルターを使用してカラーを追加
フィルタを使用して、黒の&白画像に色を追加することは可能ですか？私は、Photoshopで可能なフィルタの使用について話しています。さらに良い例は、Microsoft PowerPointのものです。
私がやっていることはこれです： 画像ファイルに黒いアイコンがあります。 イメージにあるすべてのもの（背景が透明）がフィルタを使用して選択した色を持つように、フィルタを追加して、必要な色でアイコンを表示できるようにします。 タイトルで述べたように、それはPNG画像です。私が知る限り、SVGフィルタは使用できません。
どうすればいいですか？私はオリジナルのアイコンを使ってウェブサイトのテーマを書こうとしています。私はこれに固執しています。
更新：元のPNG画像を使用します。私はそれらをSVG、またはあらかじめ編集したPNGで置き換えるつもりはありません。
ありがとうございます！私は全くお勧めしませんけれども
あなたは、CSSフィルターでそれを行うことができます。
.colorizable {
filter:
/* for demonstration purposes; originals not entirely black */
contrast(1000%)
/* black to white */
invert(100%)
/* white to off-white */
sepia(100%)
/* off-white to yellow */
saturate(10000%)
/* do whatever you want with yellow */
hue-rotate(90deg);
}
.example-clip {
display: block;
height: 20px;
margin: 1em;
object-fit: none;
object-position: 0 0;
width: 300px;
}
.original {
filter: contrast(1000%);
}
body {
background: #333;
}<img class="colorizable example-clip" src="https://cdn.sstatic.net/Sites/stackoverflow/img/wmd-buttons.svg" />
<img class="original example-clip" src="https://cdn.sstatic.net/Sites/stackoverflow/img/wmd-buttons.svg" />偉大な、それは私が探していたものです！ 値で遊んで、私が望む色を得ることができます。 –
画像それにCSS
filter: brightness(0) invert(1);
を追加してください。色は白に変更してください
CSSフィルタを使用して行うことはできますが、それは本当に悪い考えです。パフォーマンスが低くブラウザのサポートが比較的低く、必ずしもアンチエイリアシングでうまく動作するとは限りません。 – Ryan
どうすればいいですか？私はフィルターで演奏しようとしましたが、うまく動作しませんでした。 私は本当に元のアイコンを使用しようとしています。私は他のアイコンを使いたくない。 –
元のアイコンをSVGに変換しますか？それらもインラインで使うことができます。 – Ryan