web-dev-qa-db-ja.com

要素を1色にするCSSフィルター

次のCSSフィルター：

filter: brightness(0) invert(1);

要素をすべて白くします（ source ）。端正ですが、代わりに別の色にする方法はありますか。青い？これは、透明な背景がある場合の例です。アイコン。アイコンを任意の色にしたい。

csscolorscss-filters
14
mahemoff

hue-rotate()フィルターはすべての色に影響を与えるため、フルカラー画像を単色画像に変換することはありません。むしろ、それはカラーホイールの周りのすべての色を動かします。

ただし、グレースケールに変換し、セピア色を追加してから色相を回転させることで、ソリューションをハックできますこれにより、画像は緑色に網掛けされた単一の色相のようになります。

filter: grayscale(100%) sepia(100%) hue-rotate(90deg);

頻繁に使用するアイコンのようなベクターワークを扱う場合は、SVGに変換することを検討して、プレーンなCSSでカラーリングできます。 https://icomoon.io がこれに役立ちます。

9
Mark Meyer

最初のステップとしてcontrast(0)を追加すると、アイコンの色が均一な灰色に平坦化されます。これは、目的に必要です。ターゲットの色に到達するために、brightnessとsaturateをいじる必要もありました。

filter: contrast(0) sepia(100%) hue-rotate(116deg) brightness(1.4) saturate(0.28);

コードペンの例

8
Paul Chamberlain

CSSからSVGフィルターを参照すると、特定の色を取得できます。以下のSVGフィルタースニペット。特定の色については、.7/.4/.5をRGB値の単位化された値に置き換えます。

<filter id="colorme" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="0 0 0 0 .7  0 0 0 0 .4  0 0 0 0 .5  0 0 0 1 0"/>
</filter>

hue-rotate（）はHSL空間では動作しないため、非常に障害のあるフィルターです。これは、飽和色をひどくクリップする傾向があるRGB近似です。

7
Michael Mullany