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

<スタイル>
        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>
</本文>

<スタイル>
        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>
</本文>

<スタイル>
        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>
</本文>

<スタイル>
        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>
</本文>