以前、開発中に背景レイヤーにカラーマスクを追加する必要のあるプロジェクトに遭遇しました。ここでは、背景レイヤーにカラーマスクを追加する方法を具体的にまとめます。 方法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 を使用して 1 つのサーバーに複数のフロントエンド プロジェクトをデプロイする 3 つの...
取引特性1. アトミック性: トランザクションの開始後、すべての操作が完了するか、まったく実行されな...
Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...
目次1. DOMとは何か2. 要素を選択する3. getElementById() 4. クエリセレ...
以前は、Web ページのプリンタ対応バージョンを作成するには、印刷したときに見栄えがよくなるようにレ...
これは、VPS サーバー用の一般的なワンクリック パフォーマンス テスト スクリプトです。マシンの構...
背景Dockerでは、同じイメージを使用して4つのコンテナを作成します。ネットワークはブリッジモード...
目次開発の際には、機能を段階的に分析して実装することで、明確な考え方を保つことができます。 1. フ...
MySQLマスタースレーブを設定した後、スレーブの状態が正常かどうかわからないことが多く、例外が発生...
必要ページング バーを追加します。これにより、ページにジャンプしたり、ページ番号に従って特定のページ...
1. 対照的な色を使用します。ここでのコントラストとは、テキストの色と背景色のコントラストを指します...
テキストエリアタグのサイズは不変ですコードをコピーコードは次のとおりです。 <textarea...
1. zipインストールパッケージをダウンロードするMySQL サーバー 8.0.22 の圧縮パッ...
目次Tomcat でプロジェクトを展開する 3 つの方法プロジェクトをwebappsディレクトリに直...
VMwareでcentos8サービスをインストールしてコピーすると、次の問題が発生します。 コピー前...