CSS3 を使用した背景ぼかし効果の 3 つの例

導入から始めず、いきなり本題に入りましょう。
通常の背景ぼかし効果は次のとおりです。

ここに写真の説明を記入してください

プロパティを使用する:

フィルター:(2px)

通常の背景ぼかし

美観上の理由から、背景の前のテキストをぼかすことはできず、フィルター属性により、div の子孫全体に白い縁が付きます。つまり、この効果は得られません。どうすればいいですか？疑似要素を使用すると、白い境界線の問題も解決されます。

実装のアイデア:
親コンテナに背景を設定し、相対的な配置を使用して疑似要素の重なりを容易にします。 :after では、背景を継承し、ぼかしを設定し、親要素を覆うように絶対位置に配置するだけです。この方法では、親コンテナ内の子要素はぼかしの影響を受けません。疑似要素のぼかしは親要素の子には継承できないためです。
ここまで述べてきましたが、コードで頭をリフレッシュしてみましょう。

シンプルな HTML レイアウト:

<div class="bg">
   <div class="drag">ウィンドウをドラッグ</div>
</div>

CS: ...

/*背景をぼかす*/
.bg{
    幅:100%;
    高さ:100%;
    位置: 相対的;
    背景: url("../image/banner/banner.jpg") 繰り返しなしが修正されました。
    パディング:1px;
    ボックスのサイズ:境界線ボックス;
    zインデックス:1;
}
.bg:後{
    コンテンツ： "";
    幅:100%;
    高さ:100%;
    位置: 絶対;
    左:0;
    トップ:0;
    背景: 継承;
    フィルター: ぼかし(2px);
    zインデックス: 2;
}
。ドラッグ{
    位置: 絶対;
    残り:50%;
    上位:50%;
    変換: translate(-50%,-50%);
    幅:200px;
    高さ:200px;
    テキスト配置: 中央;

    zインデックス:11;
}

もちろん、上記のコードを見ると、親コンテナの下の子要素も絶対配置を使用する必要があることがわかりますが、これは後続のレイアウトには影響しませんので、お気軽にご利用ください（質問がある場合は、ブロガーに助けを求めることができます〜）。階層関係を決定するために z-index が使用され、子要素 (つまり、ここにドラッグ) が最上部にあることを確認する必要があることに注意してください。そうしないと、子要素のテキストは表示されません。

上記のコードには、div が中央に配置されることを確認するメソッドもあります。注意深い学生なら、それに気付いたはずです。これは、フレックスレイアウトを使用せずに中央に配置する比較的簡単な方法です。

では、このようなコードを書くことでどのような効果があるのでしょうか?

ここに写真の説明を記入してください

背景部分ぼかし

前のエフェクトと比較すると、部分的な背景のぼかしは比較的簡単です。このとき、親要素はぼかす疑似要素を設定する必要はありません。上記のコードとまったく同じように、子要素はぼかされますが、子要素の子孫はぼかされない場合があります (解決策は前のエフェクトで説明したとおりであることに注意してください)。
HTML レイアウトが少し変更されました:

<div class="bg">
   <div class="ドラッグ">
        <div>ウィンドウをいいね</div>
   </div>
</div>

CSSコードは次のとおりです（比較に注意してください）

/*背景を部分的にぼかす*/
.bg{
    幅:100%;
    高さ:100%;
    背景: url("../image/banner/banner.jpg") 繰り返しなしが修正されました。
    パディング:1px;
    ボックスのサイズ:境界線ボックス;
    zインデックス:1;
}
。ドラッグ{
    マージン:100px 自動;
    幅:200px;
    高さ:200px;

    背景: 継承;

    位置: 相対的;
}
.drag >div{
    幅:100%;
    高さ: 100%;
    テキスト配置: 中央;
    行の高さ:200px;
    位置: 絶対;
    左:0;
    トップ:0;
    zインデックス: 11;
}
.drag:after{
    コンテンツ： "";
    幅:100%;
    高さ:100%;
    位置: 絶対;
    左:0;
    トップ:0;
    背景: 継承;
    filter: blur(15px);/*ぼかしを目立たせるには、ぼかしを大きくします*/
    zインデックス: 2;
}

効果は以下のとおりです。

ここに写真の説明を記入してください

背景は部分的に鮮明

背景を部分的に透明にする効果は、単純でも難しくもありません。重要なのは、background:inherit 属性を適切に適用することです。ここでは、垂直方向に中央揃えするために transform を使用することはできないため、flex レイアウトを選択しましょう。ここで transform 属性を使用すると、背景もオフセットされます。この方法では、局所的な明瞭度への影響は発生しません。
HTML レイアウトは変更されません。
CSS の変更に注意してください:

/*背景の一部が透明*/
.bg{
    幅:100%;
    高さ:100%;
    位置: 相対的;
    背景: url("../image/banner/banner.jpg") 繰り返しなしが修正されました。
    パディング:1px;
    ボックスのサイズ:境界線ボックス;
}
.bg:後{
    コンテンツ： "";
    幅:100%;
    高さ:100%;
    位置: 絶対;
    左:0;
    トップ:0;
    背景: 継承;
    フィルター: ぼかし(3px);
    zインデックス: 1;
}
。ドラッグ{
    位置: 絶対;
    残り:40%;
    上位30%
    /*変換: translate(-50%,-50%);*/
    幅:200px;
    高さ:200px;
    テキスト配置: 中央;

    背景: 継承;
    zインデックス:11;

    ボックスの影: 0 0 10px 6px rgba(0,0,0,.5);
}

エフェクト表示:

ここに写真の説明を記入してください

これで、CSS3 でぼかし背景効果を実現する 3 つの例を紹介したこの記事は終了です。CSS3 のぼかし背景に関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Redis を Docker コンテナとして素早くデプロイする方法

>>: MySQL count(1)、count(*)、count(field)の違い