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の監視プロパティの詳細な説明

推薦する

mysql8.0.11をインストールしてrootパスワードを変更し、navicat for mysqlに接続するアイデアの詳細な説明

1.1. ダウンロード:公式ウェブサイトから zip パッケージをダウンロードします。私は 64 ビ...

シンプルなショッピングフォームを実装するJavaScript

この記事では、簡単なショッピングフォームを実装するためのJavaScriptの具体的なコードを参考ま...

JavaScript 定期検証パスワード強度実装方法

展示する デザインパスワード強度分析パスワードは数字、文字、特殊記号で構成されていますパスワード: ...

Windows プラットフォームでの MySQL のインストールと設定方法と注意事項

2.1、msiインストールパッケージ2.1.1、インストール特に重要なのは、インストール前に、元の ...

iframe を使用して Web ページに他の Web ページを埋め込む方法

iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...

MyISAMとInnoDBの違いについてお話しましょう

主な違いは次のとおりです。 1. MySQL はデフォルトで MyISAM を使用します。 2. M...

MySQL サーバー ログイン エラー ERROR 1820 (HY000) の解決方法

障害サイト: MySQL サーバーにログインし、どのコマンドを実行してもこのエラーが発生します my...

JavaScript でエラーが発生しやすい演算子操作の概要

目次算術演算子異常状況1: 特殊値リテラルを含む操作異常な状況 2: 他の種類のデータが数学演算に関...

JSはビデオの再生速度を制御するための簡単なサンプルコードを実装します

導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...

h1、h2、h3タグを適切に使用する

Web ページを作成する過程では、<h1>、<h2>、<h3> ...

Minio 軽量オブジェクト ストレージ サービスのインストールとブラウザの使用チュートリアル

目次導入インストール1. マウントするフォルダを作成する2. イメージをプルする3. コンテナを作成...

MySQL 8.0.22 の最新バージョンのダウンロードとインストールの超詳細なチュートリアル (Windows 64 ビット)

目次序文1. 公式サイトからMySQL 8.0.22をダウンロードする2. 環境変数を設定する3. ...

docker+gitlab+gitlab-runnerの詳細なデプロイメント

環境サーバー: centos7クライアント: ウィンドウCentos7 に docker+gitla...

Vue3 でマークダウン エディター コンポーネントを使用する方法

目次インストールコンポーネントのインポート基本的な使い方保存したマークダウンまたは HTML テキス...

CSS3 の新しいレイアウト: flex の詳細な説明

Flexの基本概念フレックス レイアウト (フレックスはフレキシブル ボックスの略)、エラスティック...