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; // フィルターこれらはほぼ同じですps では、最後の 3 つを除いて一貫しています 2.background-blend-mode を使用すると、画像の下に他の色の追加レイヤーを重ね合わせ、ブレンドを通じて画像のメインカラーを黒に変更できます。モード背景ブレンドモード:明るくする他の色の目的用。単純な CSS コードは次のとおりです:mix-blend-mode: overlay; // オーバーレイmix-blend-mode: darken; // Darkenmix-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; // Differencemix-blend-mode: exclusion; // Exclusionmix-blend-mode: hue; // Huemix-blend-mode: saturation; // 彩度ミックスブレンドモード: カラー; // カラーミックスブレンドモード: 明度; // 明るさミックスブレンドモード: 初期; / / Defaultmix-blend-mode:inherit; // Inheritmix-blend-mode: unset; // Restore
.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; }
関連する無料学習の推奨事項:
以上がCSSで画像の色を変える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。