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

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 つの使用法の分析

推薦する

ホバープロンプトにはvue2+elementuiを使用する

Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...

CSS ピクセルとさまざまなモバイル画面適応の問題に対する解決策

ピクセル解決通常、モニター解像度と呼ばれるものは、実際にはモニターの物理的な解像度ではなく、デスクト...

Linux Samba サーバーの超詳細なインストールと構成 (問題解決付き)

目次Samba サーバーの紹介Samba サーバー コンポーネントSamba サーバー関連の設定ファ...

Dockerコンテナはルーティングを介して直接通信し、ネットワーク通信を実現します。

概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...

JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明

JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明MySQL データベースを使用して、...

MySQL のユニークインデックスと通常のインデックスのどちらを選択すればよいでしょうか?

ユーザー テーブルを設計するときに、各人の ID 番号が一意であり、検索する必要があるシナリオを想像...

Vue3.xはコンポーネント通信にmitt.jsを使用します

目次クイックスタート使い方基本原則Vue2.x はコンポーネント通信に EventBus を使用しま...

Nginx でバージョン番号を隠す方法

Nginx はバージョン番号を非表示にする実稼働環境では、セキュリティ上の脆弱性の漏洩を避けるために...

HTML テーブル マークアップ チュートリアル (22): 行の境界線の色属性 BORDERCOLORLIGHT

行内では、明るい境界線の色を個別に定義できます。基本的な構文<TR ボーダーカラーライト=co...

Linux サーバーで MySQL リモート接続を有効にする方法

序文以前の非MKレコードを再編成するためのMySQLの学習説明する有効になっていない場合、データベー...

Javascript の基礎: 演算子とフロー制御の詳細な説明

目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...

JavaScript が Xiaomi のカルーセル効果を模倣

この記事は、透明度を変えてカルーセルにするXiaomiカルーセルを真似て書いたものです。初心者なので...

MySQLとRedisキャッシュ間の同期ソリューションについての簡単な説明

目次1. ソリューション 1 (UDF)デモケース2. ソリューション2(binlogの解析)キャナ...

Linux で jar パッケージを起動してバックグラウンドで実行する方法

jar パッケージを実行する Linux コマンドは次のとおりです。方法1: java -jar s...

Linux NFSメカニズムの動作原理と例の分析

NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...