子要素をぼかさずに親 Div をぼかす方法は?

親 Div をぼかすときに子要素がぼやけないようにする方法 (絶対位置指定なし)

ぼかしなどの CSS フィルターを使用して親 Div をぼかすと、望ましくない結果が生じる可能性があります。子要素もぼかします。ただし、絶対配置に頼らずにぼかし効果を親 div のみに分離する解決策があります。

内部要素を作成する

親 div を 2 つの内部要素に分割します。 :

• 背景:ぼかした背景を担当します
• content: ぼかしていない要素が含まれます

要素の配置

以下を適用しますスタイル:

• #parent_div: 内部要素の絶対位置を許可するには、position: 相対を設定します。
• #background: 位置: 絶対を使用します。トップ: 0;右: 0;下: 0;左: 0; （または高さ/幅: 100%）親 div 上に正確に配置します。
• #content: デフォルトの位置を維持します: static.

ぼかしの適用

フィルター:blur(3px) または -webkit-filter:blur(3px) を適用します。 #parent_div ではなく #background。これにより、ぼかし効果が背景要素に限定され、コンテンツ要素はシャープで影響を受けません。

例:

#parent_div {
  position: relative;
  height: 100px;
  width: 100px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  filter: blur(3px);
  z-index: -1;
}

#content {
  /* No special positioning required */
}

以上が子要素をぼかさずに親 Div をぼかす方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。