CSS を使用して画像の色を変更する 100 の方法 (収集する価値あり)

序文

「画像処理というと、PhotoShop などの画像処理ツールを思い浮かべることが多いです。フロントエンド開発者として、アイコンを状態に応じて異なる色で表示するなど、特別な効果を処理する必要がある場合がよくあります。また、ホバーしたときに画像のコントラストや影を処理する必要もあります。」

これらはPSソフトウェアによって処理されていると思いますか?いえいえ、これは純粋に CSS で書かれたもので、魔法のようなものです。

強力な CSS:フィルター

CSS フィルターは、要素のぼかし、シャープ化、色の変更などのグラフィック効果を提供します。フィルターは、画像、背景、境界線のレンダリングを調整するためによく使用されます。翻訳

CSS 標準には、定義済みの効果を実装するいくつかの関数が含まれています。

フィルター: なし        
    | ぼかし() 
    | 明るさ() 
    | コントラスト() 
    | ドロップシャドウ() 
    | グレースケール() 
    | 色相回転() 
    | 反転() 
    | 不透明度() 
    | 飽和() 
    | セピア() 
    | URL();

フィルター: なし

効果なし。デフォルトのフィルタはなしです。

filter:blur() ガウスぼかし

画像にガウスぼかし効果を与えます。長さの値が大きいほど、画像がぼやけます。

試してみましょう

画像 
{    
フィルター:ぼかし(2px);
}

明るさ(%) 線形乗算

画像を明るくしたり暗くしたりできます

画像 {
フィルター:明るさ(70%)
}

対比（％）

画像のコントラストを調整します。

画像 
{    
フィルター:コントラスト(50%);
}

ドロップシャドウ(水平シャドウ、垂直シャドウ、ぼかし、拡散色)

画像に影効果を設定します。影は画像の下に合成され、ぼかすことができ、特定の色でペイントできるマスクのオフセットバージョンです。この関数は、<shadow> タイプ（CSS3 背景で定義）の値を受け入れますが、「inset」キーワードは使用できません。この機能は既存のbox-shadow box-shadowプロパティと非常に似ていますが、違いは、フィルターを介して、一部のブラウザがパフォーマンスを向上させるためにハードウェアアクセラレーションを提供することです。

このソリューションを使用すると、実際にいくつかのアイコンの色が変更されます。たとえば、黒いアイコンが青いアイコンに変更されます。

PNG形式の小さなアイコンのCSS任意色付け技術

画像 
{    
フィルター: ドロップシャドウ(705px 0 0 #ccc);
}

ここでは、画像を投影して、同じサイズのグレーの領域を形成します。

hue-rotate(度) 色相回転

画像 {    
フィルター:色相回転(70度);
}

見てよ、私の妹がアバターになったよ！

反転(%) 反転

この関数は、入力画像を反転するために使用され、露出の効果に少し似ています。

画像 
{   
 フィルター:反転(100%)
}

グレースケール(%) 画像をグレースケールに変換します

この効果により、写真が古く見え、時間の変遷を感じさせるようになります。古代のスタイルが好きな人は間違いなくこの効果を気に入るでしょう

画像 
{    
フィルター:グレースケール(80%);
}

古代のスタイルに加えて、ホロコースト記念日など、サイト全体を灰色にする必要がある別の使用法もあります。

このように設定できます

*{    
フィルター: グレースケール(100%)   
 -webkit-フィルター: グレースケール(100%);   
 -moz-filter: グレースケール(100%);    
-ms-filter: グレースケール(100%);   
 -o-filter: グレースケール(100%);
}

セピア(%) 画像をセピア色に変換します

私の妹に以下の暖かいトーンを与えてください。

画像 
{   
 フィルター:セピア(50%)
}

ここで url() メソッドを書いていないことに気付きましたか?

はい、このコンテンツを最後に配置したいので、filter:url() は CSS フィルターを使用して画像を変更する究極の方法です。 CSS:filter は、SVG フィルターを独自のフィルターとしてインポートできます。

究極のカラーチェンジソリューション！フィルター:url();

なぜ filter:url() が画像の色を変更するための究極のソリューションなのでしょうか? ゆっくり説明させてください。

まず、PS の動作原理を見てみましょう。Web ページには R (赤)、G (緑)、B (青) の 3 つの原色があることは誰もが知っています。一般的な RGBA には不透明度値も含まれており、不透明度値はアルファチャネルに基づいて計算されます。つまり、ウェブページに表示されるすべてのピクセルは、赤、青、緑、アルファの 4 つのチャネルで構成されています。各チャネルはカラーパレットと呼ばれます。PS の 8 ビットパレットは 2 の 256 の 8 乗を意味し、各チャネルの値の範囲は (0-255) です – SVG Research Road (11) – フィルター: feColorMatrix

各チャンネルの値を変更できれば、必要な色を完璧に得ることができますか? 原理的には、PS などの SVG フィルターを使用して、色の変更だけでなく、必要な画像をすべて取得できます。何もないところから画像を生成することもできます。

svg feColorMatrixは素晴らしい

<svg 高さ="0" xmlns="http://www.w3.org/2000/svg">  
  <定義>        
<フィルターid="変更">               
 <feColorMatrix type="matrix" 値="               
 0 0 0 0 0.55               
 0 0 0 0 0.23                
 0 0 0 0 0                
 0 0 0 0 1" />     
   </フィルター>   
 </defs></svg>
<img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="">
画像
 {   
 フィルター:url(#change);}

単一のチャネルを通じて画像を単一の色に変換できます

<svg 高さ="0" xmlns="http://www.w3.org/2000/svg">    
<定義>       
 <フィルターid="変更">               
<feColorMatrix 値="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0" /> </フィルター>    
</defs>
</svg>

デュアルチャンネルを通じて、非常にクールなPS効果を得ることができます

もちろん、ここでは単なる例です。マトリックス内の値を設定することで、定義したルールに従って表示する各ピクセルの値を設定できます。

ここではfeColorMatrix行列の計算方法を詳しく説明します。

その中にはリンギ

n ビンa(アルファ)は元の画像の各ピクセルのRGB値です

行列計算により得られた Rout Gout Bout Aout が、表示される最終的な RGBA 値となります。

画像をモノクロに変換します。例として茶色のrgba(140,59,0,1)を取り上げます。

上記の式に従って、いくつかの計算を簡略化できます。同じ行では、1 つのチャネル値のみが設定され、他のチャネルは 0 になります。

行列を導くことは難しくない

0 0 0 0 目標値R0 0 0 0 目標値G0 0 0 0 目標値B0 0 0 0 1

ルールによれば、255/表示したいチャンネルに対応する色 = 目標値を計算するだけでよい。

必要な茶色rgba (140,59,0,1)は、カラーパレットrgbaでは140 59 0 255に変換されます。

目標値は計算できる

0 0 0 0 0.550 0 0 0 0.230 0 0 0 0 0 0 0 0 1

クールな効果を生み出すマルチチャンネル設定

これまで見てきたデュアルチャンネルで形成されたクールな画像のように

今日は写真の彩度を上げたいのですが、どうすればいいでしょうか？まず、飽和の原因、つまり青を緑に基づいて、マトリックスを見ることができます。（50/255）、マトリックスの変換後、Rは200/255-50/255 = 1.76になります×0.2、50x-0.5。 SVG 研究の道 (11) – フィルター:feColorMatrix

<svg 高さ="0" xmlns="http://www.w3.org/2000/svg">    
<定義>       
 <フィルターid="変更">             
  <feColorMatrix値="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0           
            0 0 0 1 0" />       
 </フィルター>    
</defs>
</svg>

その他の解決策

feColorMatrix svg フィルターに加えて、画像に適用できるフィルターを定義する方法は他にもたくさんあります。スペースの制限により、ここでは詳細には触れません。

まとめ CSS3 はフィルター属性を提供しており、フロントエンド技術を通じてよりクールな特殊効果を実現できます。SVG フィルターを利用することで、複雑なフィルター効果を実現できます。CSS:フィルターと IE フィルターは同じ概念ではないことに注意してください。CSS:フィルターは、ブラウザーによって互換性が異なります。使用時には、ブラウザーの互換性に注意する必要があります。