CSSで任意の要素に::backdropする方法

CSS には要素の背後を覆い隠す::backdrop擬似要素というものがあります。::backdrop を使用することで、要素の背後にあるものを隠し、見せたい場所や操作できる箇所を強調させることができます。

しかし、現時点ではdialog要素によるモーダルウィンドウやポップアップウィンドウ、動画のフルスクリーンモードなどの一部の状態でしか使用できません。

今回は、dialog要素やフルスクリーンモード以外でも ::backdrop する方法を紹介します。

方法は2種類あります。擬似要素を使用した割とポピュラーな方法と、今回の本命となるborder-imageプロパティを使用した方法です。

擬似要素を使用する方法

.backdrop {
  position: relative;
}
.backdrop:hover {
  z-index: 1;
}
.backdrop:hover::after {
  background: rgb(0,0,0,0.5);
  content: "";
  pointer-events: none;
  position: absolute;
    inset: 0;
  z-index: -1;
}

::backdrop したい要素に positionプロパティの static 以外の値を設定します。

要素がhover状態になったら、その他の要素より前面になるよう、z-indexプロパティを設定し、その背後に position: fixed; と z-index: -1; を設定した、表示領域全体を覆う擬似要素を表示させます。

擬似要素には pointer-events: none; を追加する必要があります。これが無いと表示領域全体がhover状態になり、::backdrop しっぱなしになります。

border-imageプロパティを使用する方法

今回の本命となる方法です。

.backdrop {
  position: relative;
}
.backdrop:hover {
  border-image: linear-gradient(rgb(0,0,0,0.5),rgb(0,0,0,0.5)) 10000 fill / 10000px / 10000px;
  z-index: 1;
}

 これだけです。擬似要素を使用した場合と比べ、少ない記述で実現できます。

border-imageプロパティは、border-image-sourceプロパティ (linear-gradient の部分)、border-image-sliceプロパティ (10000 の部分)、border-image-widthプロパティ (1つ目の 10000px の部分)、border-image-outsetプロパティ (2つ目の 10000px の部分)、border-image-repeatプロパティ (今回は不使用) のショートハンドプロパティです。

border-image-outsetプロパティを使用すると、要素外側にボーダー画像が設定でき、スクロール領域をはみ出しても、余計な縦スクロール・横スクロールは発生しません。

他にも次のような設定ができ、応用すると、table要素のhover時のスタイリングなども実装できます。

上下にのみ ::backdrop

.backdrop-vertical {
  border-image: linear-gradient(rgb(0,0,0,0.5),rgb(0,0,0,0.5)) 10000 0 / 10000px 0 / 10000px 0;
  inline-size: max-content;
    max-inline-size: 100%;
  margin-inline: auto;
}

border-image-sliceプロパティの部分、border-image-widthプロパティの部分、border-image-outsetプロパティの部分を、marginプロパティのショートハンドと同様に設定します。

左右と適用要素の背後に ::backdrop

.backdrop-horizontal {
  border-image: linear-gradient(rgb(0,0,0,0.5),rgb(0,0,0,0.5)) 0 10000 fill / 0 10000px / 0 10000px;
  inline-size: max-content;
    max-inline-size: 100%;
  margin-inline: auto;
}

border-image-sliceプロパティの部分に fill を加えることで、適用要素の背後にも ::backdrop が追加されます。

祖先要素を突き抜けて、横いっぱいに広がる見出しなどにも使用できます。

四隅にのみ ::backdrop

.backdrop-corner {
  border-image: linear-gradient(rgb(0,0,0,0.5),rgb(0,0,0,0.5)) 100% / 10000px / 10000px;
  inline-size: max-content;
    max-inline-size: 100%;
  margin-inline: auto;
}

table要素のセル (td要素, th要素) に適用すると良さそうな設定です。しかし、borderプロパティとの併用ができないので、::before擬似要素や、::after擬似要素と組み合わせる必要があります。

CodePen

〆

バックドロップっていうと、真っ先にプロレスのやつが思い浮かびます。