【CSS Modules】::backdrop疑似要素の使い方
::backdrop疑似要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
::backdrop擬似要素は、特定の要素がフルスクリーン表示された際や、<dialog>要素が表示された際に、その要素の背後に自動的に生成されるボックスを表します。この擬似要素は、表示中の要素の内容を覆う形で配置され、要素の視覚的なコンテキストを調整するために利用されます。
具体的には、ユーザーがWebページ上のビデオを全画面表示した際に、ビデオ以外の画面全体を暗くしてビデオに集中させたり、モーダルダイアログを表示する際に、ダイアログ以外の背景部分をグレーアウトさせたり、ぼかしたりする効果を実現するために使用されます。::backdropは常に、対象となる要素よりも低いz-index値を持つため、要素の背後に配置され、その手前に表示されることはありません。
この擬似要素は、対象要素が閉じられたり、フルスクリーン表示が終了したりすると、自動的にDOMから削除されます。背景色、背景画像、フィルタ、トランジションなど、様々なCSSプロパティを適用してスタイリングすることが可能です。これにより、ユーザーインターフェースにおける注意の集中や視覚的な区切りを効果的に作成できます。
公式リファレンス: ::backdrop
構文(syntax)
1::backdrop { 2 /* プロパティ: 値; */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません