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 ファーストスクリーンパフォーマンス最適化コンポーネントの知識ポイントの概要