その名の通り、「背景として機能してくれる、便利な擬似要素」になります。

ただし、

この擬似要素を使うには（反映されるには）条件があり、現時点では、

・dialog要素を showModal() を使って開いた時
・何らかの要素を Fullscreen API を使って全画面表示した時

に適用されます。
何にでも適用できるわけではありませんが、使い方を覚えておけば、そのうち役にたつことと思います。

それでは上記の2つの例をベースに、backdrop擬似要素の使い方について、
次のセクションよりそれぞれ書いていきます。

dialogタグを showModal() を使って開いた時

これは、以前の記事：
dialog要素を使ってモーダルウインドウを作成する方法
↑こちらでもご紹介している方法です。
次のようなhtmlを用意しておき、JavaScriptで対象のダイアログ要素に対して
showModal() を使うことで、::backdrop擬似要素が有効になります。

[html]

<div>
  <button id="buttonOpen">モーダルを開く</button>
</div>
<dialog class="container-modal" id="modalDialog">
  <div class="wrapper-modal">
    <h2>シンプルなモーダル</h2>
    <p>
      サンプルテキスト。
      dialogタグを使うことで、検索エンジンにも
      この要素がダイアログ（モーダルウインドウ）だよ、
      ということを明示できるのでは、と期待しています。
    </p>
    <button id="buttonClose" type="reset">モーダルを閉じる</v-btn>
  </div>
</dialog>

[JavaScript側]

<script>
const myDialog = document.getElementById('modalDialog');
const myButtonOpen = document.getElementById('buttonOpen');
const myButtonClose = document.getElementById('buttonClose');

myButtonOpen.addEventListener('click', () => {
  myDialog.showModal();
});
myButtonClose.addEventListener('click', () => {
  myDialog.close('閉じた時に渡すテキスト(String)を指定できます');
});
</script>

cssの例としては、次のような感じでしょうか。
[cssの例]

.container-modal {
  background-color: initial;
  border: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
.container-modal::backdrop {
  background-color: rgba(0, 0, 0, .5);
}
.wrapper-modal {
  background: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
  height: 320px;
  left: 50%;
  opacity: 1;
  padding: 40px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .3s;
  width: 480px;
  z-index: 20;
}

↑この例では、10〜12行目の部分で
backgroud擬似要素に背景を指定しています。

何らかの要素を Fullscreen API を使って全画面表示した時

続いて、Fullscreen API を使った例です。
こちらも以前の記事、
[JavaScript]あるボタンを押したら、いま見ているブラウザをフルスクリーン表示にする方法[Fullscreen API]
↑こちらにて紹介している方法です。

まず、次のようなhtml構造があったとします。

[html]

<div class="fullscreen-target wrapper-target">
  これがフルスクリーン表示したい要素
</div>
<button class="fullscreen-trigger">これを押したらFullScreen</button>

上記のhtmlに対して、次のようにJavaScriptを記述することで、
対象の要素のフルスクリーン表示が有効になります。

[JavaScript側]

<script>
const fullscreenTrigger = document.querySelector('.fullscreen-trigger');
fullscreenTrigger.addEventListener('click', ()=>{
  const isFullscreen = document.fullscreenElement;
  const fullscreenTarget = document.querySelector('.fullscreen-target');
  if( isFullscreen ) {
    document.exitFullscreen();
  } else {
    fullscreenTarget.requestFullscreen();
  }
});
</script>

cssの例としては、次のような感じが想定できます。
[cssの例]

.wrapper-target::backdrop {
  background: rgba(0, 0, 0, .25);
}

↑このように書くことで、
FullscreenAPI を通じて全画面表示した要素に対して、
backdrop擬似要素を有効にすることができます。

この記事のまとめ

今回の記事では、

・dialog要素を showModal() を使って開いた時
・何らかの要素を Fullscreen API を使って全画面表示した時

に使用することができる「backdrop擬似要素」についてご紹介しました。

特に、dialog要素を使ったモーダルの作り方については、

今後のWeb制作で一般的になってくる手法かなと感じていますので、
覚えておくときっと役にたつかもしれません。

当サイトでは、今後もWebデザイン・Web制作に関する記事を掲載していく予定です。

この記事が、皆さんのWeb制作を
より楽しくさせる事ができたらいいな、と願っています。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。