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のデータディレクトリ内のファイルを直接コピーしてデータを復元する実装
必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...
COALESCE は、各パラメータ式 (expression_1、expression_2、...、...
追加するdocker run -it -name test -d nginx:latest /bin...
序文: MySQL 8.0 では高速な列追加がサポートされ、数秒で大きなテーブルにフィールドを追加で...
目次1. 書き込み可能: 書き込み可能2. 列挙可能: 列挙可能3. 設定可能: 設定可能オブジェク...
ページを作成するときに、ページの見栄えを良くするために、背景画像を設定する必要があることがよくありま...
まず、Vue-cli をインストールする必要があります。 npm インストール -g vue-cli...
MongoDB はクロスプラットフォームであり、Windows と Linux の両方にインストール...
この記事を読む前に、ボリューム、バインドマウント、tmpfs マウントの基本を理解しておいてください...
モバイル側では、フレックスレイアウトが非常に便利です。デバイスの幅に応じてコンテナの幅を自動的に調整...
目次ルーティングとは純粋コンポーネントの基本的な使用純粋なコンポーネントの使用に関する注意事項ルーテ...
ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリック...
jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。スタックメ...
これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...