冗長になりすぎずに基本について説明します。フロントエンドでは、背景をぼかす必要がある場合がありますが、最初にその効果を見てみましょう。
具体的な実装は次のとおりです。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <title>背景ぼかし</title></head><body> <div class=main><!-- 以下背景はぼやけ、他のコンテンツは鮮明です--><!-- コンテンツ レイヤー--> <div class=banner> <div class=banner-contain> <h1>私がコンテンツです</h1> </div> <!背景レイヤー --> <div class=banner-bg></div> </div> </div> <style> .main{ width: 100% } .banner{ width: 100%; } .banner-bg{ width: 100%;/*幅は画面全体に表示されます*/padding-top: 52.734%;/*画像の高さを幅で割ってこの値を取得します*/background: url(test.jpg)center center no-repeat;/*2 つの中心はそれぞれ水平方向と垂直方向に配置されます*/ background-size: 100%;/*背景は水平方向に広がります*/ filter:blur(10px);ぼかし値。大きいほどぼかします*/ } .banner-contain{position:Absolute;/*コンテンツレイヤーの絶対位置を設定します*/ width:100%:z-index; : 6;/*コンテンツを先頭に移動*/ margin-top: 6% } </style></body></html> 1. 適応的な実装:div タグの padding-top をパーセンテージに設定します。パディングとマージンのパーセンテージ値は、画面の高さではなく幅に基づいて計算されるため、それに応じて適応領域を設定できます。たとえば、画像情報は次のようになります。続く
高さと幅の比率は 540/1024 で、これは約 52.734%、つまり高さは幅の 52.734% です。ここで幅を 100% に設定すると、幅のpadding-top次のようになります。 52.734%*100%
2 つのレイヤーを設定します。1 つは背景のぼかしレイヤーで、外側の div コンテナー全体を適応的にサポートし、 filter:blur()属性を通じてぼかし値を設定します。もう 1 つはコンテンツ レイヤーで、絶対位置を指定し、Z インデックスを設定して、コンテンツ レイヤー コンテンツ レイヤーがぼかしの影響を受けないよう、レイヤーのブロックが防止されます。
上記は、背景のぼかしを実現するためにエディターがフロントエンドで紹介するサンプルコードですが、内容が明確で適応的であるため、ご質問があれば、私とエディターにメッセージを残してください。時間内に返信させていただきます。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！
この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明記してください。ありがとうございます。