CSS3で背景画像にカラーマスクを追加する方法

CSS3で背景画像にカラーマスクを追加する方法

以前、開発中に背景レイヤーにカラーマスクを追加する必要のあるプロジェクトに遭遇しました。ここでは、背景レイヤーにカラーマスクを追加する方法を具体的にまとめます。

方法1: 配置によるオーバーレイ(階層に注意)

<div class="wrap1">
     <div class="inner"> </div>
</div>
.wrap1 {
    位置: 相対的;
    幅: 1200ピクセル;
    高さ: 400px;
    背景: rgba(0, 0, 0, .5);
}

.wrap1 .inner {
    位置: 絶対;
    左: 0;
    右: 0;
    上: 0;
    下部: 0;
    背景: url(ban8.jpg) 繰り返しなし 中央 中央;
    背景サイズ: カバー;
    Zインデックス: -1;
}

方法2: 疑似要素によるオーバーレイ

<div class="wrap2"></div>
.wrap2 {
    位置: 相対的;
    幅: 1200ピクセル;
    高さ: 400px;
    背景: url(ban8.jpg) 繰り返しなし 中央 中央;
    背景サイズ: カバー;
}

.wrap2::before {
    コンテンツ: "";
    位置: 絶対;
    左: 0;
    右: 0;
    下部: 0;
    上: 0;
    背景色: rgba(0, 0, 0, .5);
    zインデックス: 2;
}

方法3: CSS3 カラーオーバーレイ background-blend-mode:multiply; (乗算)

<div class="wrap3"></div>
.wrap3 {
    位置: 相対的;
    幅: 1200ピクセル;
    高さ: 400px;
    背景: url(ban8.jpg) rgba(0, 0, 0, .5) 繰り返しなし 中央 中央;
    背景ブレンドモード: 乗算;
}

拡張機能: 背景のぼかしとカラーオーバーレイ

.wrap4 {
    位置: 相対的;
    幅: 1200ピクセル;
    高さ: 400px;
    背景: url(ban8.jpg) rgba(0, 0, 0, .5) 繰り返しなし 中央 中央;
    背景ブレンドモード: 乗算;
    フィルター: ぼかし(2px);
    オーバーフロー: 非表示;
}

要約する

上記は、CSS3 で背景画像にカラーマスクを追加する方法について紹介しました。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  MySQL マスタースレーブ構築(複数のマスターと 1 つのスレーブ)の実装アイデアと手順

>>:  Vue ファースト スクリーン パフォーマンス最適化コンポーネントの知識ポイントの概要

推薦する

nginx で複数のフロントエンド プロジェクトをデプロイするいくつかの方法

nginx を使用して 1 つのサーバーに複数のフロントエンド プロジェクトをデプロイする 3 つの...

MySQLトランザクションとMySQLログの詳細な説明

取引特性1. アトミック性: トランザクションの開始後、すべての操作が完了するか、まったく実行されな...

複数のサーバーにNginxリバースプロキシを実装する方法

Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...

JavaScript のドキュメント オブジェクト モデル (DOM)

目次1. DOMとは何か2. 要素を選択する3. getElementById() 4. クエリセレ...

XHTML CSS ページをプリンタ ページに変換する

以前は、Web ページのプリンタ対応バージョンを作成するには、印刷したときに見栄えがよくなるようにレ...

VPSサーバーでよく使われるパフォーマンステストスクリプトの概要

これは、VPS サーバー用の一般的なワンクリック パフォーマンス テスト スクリプトです。マシンの構...

複数の Docker コンテナが同じポート番号を持たない場合の解決策

背景Dockerでは、同じイメージを使用して4つのコンテナを作成します。ネットワークはブリッジモード...

フォーム検証機能を実装するためのネイティブ js

目次開発の際には、機能を段階的に分析して実装することで、明確な考え方を保つことができます。 1. フ...

Zabbix が MySQL のマスター/スレーブ状態を監視する方法の詳細な説明

MySQLマスタースレーブを設定した後、スレーブの状態が正常かどうかわからないことが多く、例外が発生...

Element UI を使用してページにページング ナビゲーション バーを追加する方法

必要ページング バーを追加します。これにより、ページにジャンプしたり、ページ番号に従って特定のページ...

ウェブページの読みやすさを向上させるいくつかの方法

1. 対照的な色を使用します。ここでのコントラストとは、テキストの色と背景色のコントラストを指します...

テキストエリアタグはサイズ変更できず、マウスでドラッグすることもできません

テキストエリアタグのサイズは不変ですコードをコピーコードは次のとおりです。 <textarea...

MySQL 8.0.22 圧縮パッケージの完全なインストールと構成のチュートリアル図 (テスト済みで効果的)

1. zipインストールパッケージをダウンロードするMySQL サーバー 8.0.22 の圧縮パッ...

tomcat デプロイメント プロジェクトの実装と IDEA との統合

目次Tomcat でプロジェクトを展開する 3 つの方法プロジェクトをwebappsディレクトリに直...

VMWARE で Centos8 仮想マシンをコピーすることによって発生する IP 損失の問題の解決策

VMwareでcentos8サービスをインストールしてコピーすると、次の問題が発生します。 コピー前...