CSS3 で背景ぼかしを実現する 3 つの方法 (要約)

CSS3 で背景ぼかしを実現する 3 つの方法 (要約)

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のデータディレクトリ内のファイルを直接コピーしてデータを復元する実装

>>:  Vueの監視プロパティの詳細な説明

推薦する

CSSは高さを設定せずにdivを完全に中央に配置することを実現します

必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...

MySql COALESCE 関数の使用コード例

COALESCE は、各パラメータ式 (expression_1、expression_2、...、...

docker run後、ステータスは常にExitedになります

追加するdocker run -it -name test -d nginx:latest /bin...

MySQL 8.0 で列を素早く追加する方法

序文: MySQL 8.0 では高速な列追加がサポートされ、数秒で大きなテーブルにフィールドを追加で...

JavaScript オブジェクトの 3 つのプロパティ

目次1. 書き込み可能: 書き込み可能2. 列挙可能: 列挙可能3. 設定可能: 設定可能オブジェク...

CSSで背景ぼかしを設定する方法

ページを作成するときに、ページの見栄えを良くするために、背景画像を設定する必要があることがよくありま...

Vue-cli を使用して Vue プロジェクトを構築する手順の詳細な説明

まず、Vue-cli をインストールする必要があります。 npm インストール -g vue-cli...

Linux での MongoDB のインストールに関するチュートリアル

MongoDB はクロスプラットフォームであり、Windows と Linux の両方にインストール...

Dockerデータストレージの概要

この記事を読む前に、ボリューム、バインドマウント、tmpfs マウントの基本を理解しておいてください...

フレックスレイアウトでコンテナ内のコンテンツを維持するためのソリューションの詳細な説明

モバイル側では、フレックスレイアウトが非常に便利です。デバイスの幅に応じてコンテナの幅を自動的に調整...

5分でReactルーティングについてお教えします

目次ルーティングとは純粋コンポーネントの基本的な使用純粋なコンポーネントの使用に関する注意事項ルーテ...

...

CSS メニューボタンアニメーション

ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリック...

スタックメニューを実装するためのjQueryプラグイン

jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。スタックメ...

ウェブ開発者やデザイナーにとって欠かせないオンラインウェブツールとアプリケーション

これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...