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

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:フィルターは、ブラウザーによって互換性が異なります。使用時には、ブラウザーの互換性に注意する必要があります。

要約する

上記は、CSS を使用して画像の色を変更する 100 の方法です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  効果的なウェブフォームのための 8 つのルール

>>:  mysql-canal-rabbitmq のインストールと展開の非常に詳細なチュートリアル

推薦する

画像とテキストでHTTPヘッダーのあらゆる側面を理解する

HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...

MySQL 5.7.20 の解凍バージョンをインストールするための詳細な手順 (2 つの方法)

Windows 64ビットでのMySQLのインストールについて説明します。5.7以降、MySQLの...

Docker のコンテナ データ ボリュームの概要

目次Dockerコンテナのデータ量データボリュームの使用方法1: コマンド-vを使用して直接マウント...

Docker 学習: コンテナ コンテナの具体的な使用方法

コンテナは Docker のもう一つの中心的な概念です。簡単に言えば、コンテナとは、独立して実行され...

JS ループで async と await を正しく使用する方法

目次概要(ループモード - 共通)配列と非同期メソッドを宣言して反復するforループで使用するマップ...

MySQL インデックスの原理と使用例の分析

この記事では、例を使用して MySQL インデックスの原理と使用方法を説明します。ご参考までに、詳細...

MySQL開発標準と使用スキルの概要

1. 命名規則1. データベース名、テーブル名、フィールド名には小文字を使用し、アンダースコアで区切...

ウェブデザインの経験とスキルの概要

■ ウェブサイトのテーマ計画 ウェブサイトのテーマが断片化しすぎないように注意してください。一般的に...

vue3 のさまざまな構文形式を比較したサンプルコード

デフォルトのテンプレートメソッドはvue2に似ており、コンポーネント内のセットアップ関数を使用します...

MySQL slow_log テーブルを InnoDB エンジンに変更することはできません。詳細な説明

背景mysql.slow_log からスロー クエリ ログを取得するのは遅く、テーブルは csv テ...

Linux の PHP に XML 拡張機能をインストールする詳細な手順

PHP Linux に XML 拡張機能をインストールする1. PHPインストールソースパッケージを...

Web 上の要素を非表示にする方法とその利点と欠点

ソースコードの例: https://codepen.io/shadeed/pen/03caf6b36...

Nginx フォワード プロキシとリバース プロキシ、および負荷分散機能の構成コード例

この記事は主に、Nginx のフォワード プロキシとリバース プロキシ、および負荷分散機能の設定コー...

Nodeはバックエンドの実装手順を素早く構築します

1. まず、node、express、express-generator をインストールします (4...

NginxはIP経由の直接アクセスを禁止し、カスタム500ページにリダイレクトします

設定ファイルに直接 サーバー{ listen 80 default; # IPへの直接アクセスを禁止...