1. 通常の背景ぼかし コード: <スタイル> html, 体 { 幅: 100%; 高さ: 100%; } * { マージン: 0; パディング: 0; } /*背景をぼかす*/ .bg { 幅: 100%; 高さ: 100%; 位置: 相対的; 背景: url("./bg.jpg") 繰り返しなし固定; 背景サイズ: カバー; ボックスのサイズ: 境界線ボックス; フィルター: ぼかし(2px); zインデックス: 1; } 。コンテンツ { 位置: 絶対; 左: 50%; 上位: 50%; 変換: translate(-50%, -50%); 幅: 200ピクセル; 高さ: 200px; テキスト配置: 中央; zインデックス: 2; } </スタイル> </head> <本文> <div class="bg"> <div class="content">ぼかした背景</div> </div> </本文> 効果は以下のとおりです。 このように記述すると、div の子孫全体がぼやけて白い縁が現れ、ページが非常に見苦しくなります。この問題を解決するには、疑似要素を使用します。疑似要素のぼやけ具合は親要素の子孫に継承されないためです。 コード: <スタイル> html, 体 { 幅: 100%; 高さ: 100%; } * { マージン: 0; パディング: 0; } /*背景をぼかす*/ .bg { 幅: 100%; 高さ: 100%; 位置: 相対的; 背景: url("./bg.jpg") 繰り返しなし固定; 背景サイズ: カバー; ボックスのサイズ: 境界線ボックス; zインデックス: 1; } .bg:後{ コンテンツ: ""; 幅: 100%; 高さ: 100%; 位置: 絶対; 左: 0; 上: 0; /* 親要素から背景プロパティの設定を継承します */ 背景: 継承; フィルター: ぼかし(2px); zインデックス: 2; } 。コンテンツ { 位置: 絶対; 左: 50%; 上位: 50%; 変換: translate(-50%, -50%); 幅: 200ピクセル; 高さ: 200px; テキスト配置: 中央; zインデックス: 3; } </スタイル> </head> <本文> <div class="bg"> <div class="content">ぼかした背景</div> </div> </本文> 効果は以下のとおりです。 2. 背景を部分的にぼかす 前のエフェクトをマスターしたら、ローカル ブラー エフェクトは比較的簡単になります。 コード: <スタイル> html, 体 { 幅: 100%; 高さ: 100%; } * { マージン: 0; パディング: 0; } /*背景をぼかす*/ .bg { 幅: 100%; 高さ: 100%; 位置: 相対的; 背景: url("./bg.jpg") 繰り返しなし固定; 背景サイズ: カバー; ボックスのサイズ: 境界線ボックス; zインデックス: 1; } 。コンテンツ { 位置: 絶対; 左: 50%; 上位: 50%; 変換: translate(-50%, -50%); 幅: 200ピクセル; 高さ: 200px; 背景: 継承; zインデックス: 2; } .content:after { コンテンツ: ""; 幅: 100%; 高さ: 100%; 位置: 絶対; 左: 0; 上: 0; 背景: 継承; フィルター: ぼかし(15px); /*ぼかしをもっと目立たせるには、ぼかしを大きくします*/ zインデックス: 3; } .content>div { 幅: 100%; 高さ: 100%; テキスト配置: 中央; 行の高さ: 200px; 位置: 絶対; 左: 0; 上: 0; zインデックス: 4; } </スタイル> </head> <本文> <div class="bg"> <div class="content"> <div>背景を部分的にぼかす</div> </div> </div> </本文> 効果は以下の図に示されています。 3. 背景の部分的な鮮明さ コード: <スタイル> html, 体 { 幅: 100%; 高さ: 100%; } * { マージン: 0; パディング: 0; } /*背景をぼかす*/ .bg { 幅: 100%; 高さ: 100%; 位置: 相対的; 背景: url("./bg.jpg") 繰り返しなし固定; 背景サイズ: カバー; ボックスのサイズ: 境界線ボックス; zインデックス: 1; } .bg:後{ コンテンツ: ""; 幅: 100%; 高さ: 100%; 位置: 絶対; 左: 0; 上: 0; 背景: 継承; フィルター: ぼかし(5px); zインデックス: 2; } 。コンテンツ { 位置: 絶対; 左: 50%; 上位: 50%; 変換: translate(-50%, -50%); 幅: 200ピクセル; 行の高さ: 200px; テキスト配置: 中央; 背景: 継承; zインデックス: 3; ボックスの影: 0 0 10px 6px rgba(0, 0, 0, .5); } </スタイル> </head> <本文> <div class="bg"> <div class="content"> <div>背景の一部が透明です</div> </div> </div> </本文> 効果は以下の図に示されています。 CSS3 で背景ぼかしを実現する 3 つの方法についての記事はこれで終わりです。CSS3 背景ぼかしに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: mysqlのデータディレクトリ内のファイルを直接コピーしてデータを復元する実装
1.1. ダウンロード:公式ウェブサイトから zip パッケージをダウンロードします。私は 64 ビ...
この記事では、簡単なショッピングフォームを実装するためのJavaScriptの具体的なコードを参考ま...
展示する デザインパスワード強度分析パスワードは数字、文字、特殊記号で構成されていますパスワード: ...
2.1、msiインストールパッケージ2.1.1、インストール特に重要なのは、インストール前に、元の ...
iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...
主な違いは次のとおりです。 1. MySQL はデフォルトで MyISAM を使用します。 2. M...
障害サイト: MySQL サーバーにログインし、どのコマンドを実行してもこのエラーが発生します my...
目次算術演算子異常状況1: 特殊値リテラルを含む操作異常な状況 2: 他の種類のデータが数学演算に関...
導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...
Web ページを作成する過程では、<h1>、<h2>、<h3> ...
目次導入インストール1. マウントするフォルダを作成する2. イメージをプルする3. コンテナを作成...
目次序文1. 公式サイトからMySQL 8.0.22をダウンロードする2. 環境変数を設定する3. ...
環境サーバー: centos7クライアント: ウィンドウCentos7 に docker+gitla...
目次インストールコンポーネントのインポート基本的な使い方保存したマークダウンまたは HTML テキス...
Flexの基本概念フレックス レイアウト (フレックスはフレキシブル ボックスの略)、エラスティック...