CSS3を使用して背景画像の色を変更するさまざまな方法

CSS3 では画像の色を変更できます。これからは複数の絵をデザインする必要がなくなり、いつでも修正できるようになります。以下では、CSS3 で背景画像の色を変更する方法について簡単に紹介します。

方法1 : CSS3フィルターでドロップシャドウを使用する

コードは次のとおりです。

<スタイル>
。アイコン{
    表示: インラインブロック;
    幅: 180ピクセル;
    高さ: 180ピクセル;
    背景: url('img/XXX.png') 繰り返しなしの中央カバー;
    オーバーフロー: 非表示;
}
.icon:after{
    コンテンツ： '';
    表示: ブロック;
    高さ: 100%;
    変換: translateX(-100%);
    背景: 継承;
    filter: drop-shadow(144px 0 0 #fff); // 変更する色の値}
</スタイル>
 
<i class="icon"></i>

例:

ドロップシャドウフィルターを使用すると、要素または画像の不透明な領域に影を追加できます。

透明な PNG アイコンにぼかしのない影を適用することは、別の色のアイコンを生成することと同じです。

次に、overflow:hiddenと変位処理を使用して元のアイコンを非表示にします

ミックスブレンドモード値: [最後の 3 つを除いて、効果は PS とほぼ同じです]

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

方法2 : CSS3のmix-blend-modeとbackground-blend-modeを使用する

コードは次のとおりです。

<スタイル>
。アイコン{
    表示: インラインブロック;
    幅: 180ピクセル;
    高さ: 180ピクセル;
    背景画像: url($'img/XXX.png'), 線形グラデーション(#f00, #f00);
    背景ブレンドモード: 明るくする;
    背景サイズ: カバー;
}
</スタイル>
<i class="icon"></i>

例:

明るくするブレンドモード: 明るくする、明るくするモードは暗くするモードの反対の効果があります。黒はどの色よりも暗いので、黒はどの色にも置き換えられます。逆に、素材の背景色が黒の場合、メインカラーは白になります。次に、暗くするブレンドモードを使用する必要があります。

Linear-gradient(#f00, #00f) でもグラデーションカラーの効果を実現できます。

要約:

方法 1 では png 形式の画像に制限されますが、方法 2 では画像形式に制限はありません。

CSS3 には一定の互換性があります。 Chrome、Firefox、モバイル端末でのご利用がより適しています。

CSS3 を使用して背景画像の色を変更するさまざまな方法についての記事はこれで終わりです。CSS3 を使用して背景画像の色を変更する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL複合インデックスの概要

>>: HTML の POST リクエストにおける a タグの 2 つの使用法の分析