CSSで画像の色を変える方法

CSS で画像の色を変更する方法: 1. [mix-blend-mode] メソッドを使用して値を取得します; 2. ミキシング モード [background-blend-mode: lighten] を使用して、画像のメインカラーを黒に変更する、その他の色の目的。

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

#CSS を使用して画像の色を変更する方法:

1. まず、mix-blend-mode の値を見てみましょう

mix -blend-mode:normal; // 通常

#mix-blend-mode: multiply; // 乗算

mix-blend-mode: screen; // フィルター

mix-blend-mode: overlay; // オーバーレイ

mix-blend-mode: darken; // Darken

mix-blend-mode: lighten; //明るくする

mix-blend-mode: color-dodge; // カラーを覆い隠す

mix-blend-mode: color-burn; // 色を濃くする

mix-blend -mode:hard-light; // ハードライト

mix-blend-mode:soft-light; // ソフトライト

mix-blend-mode:Difference; // Difference

mix-blend-mode: exclusion; // Exclusion

mix-blend-mode: hue; // Hue

mix-blend-mode: saturation; // 彩度

ミックスブレンドモード: カラー; // カラー

ミックスブレンドモード: 明度; // 明るさ

ミックスブレンドモード: 初期; / / Default

mix-blend-mode:inherit; // Inherit

mix-blend-mode: unset; // Restore

これらはほぼ同じですps では、最後の 3 つを除いて一貫しています

2.background-blend-mode を使用すると、画像の下に他の色の追加レイヤーを重ね合わせ、ブレンドを通じて画像のメインカラーを黒に変更できます。モード背景ブレンドモード:明るくする他の色の目的用。単純な CSS コードは次のとおりです:

.pic {
width: 200px;
height: 200px;
background-image: url($img);
background-size: cover;
}
.pic1 {
background-image: url($img), linear-gradient(#f00, #f00);
background-blend-mode: lighten;
background-size: cover;
}

関連する無料学習の推奨事項:

javascript ビデオ チュートリアル

以上がCSSで画像の色を変える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。