CSS 偽元素 ::backdrop：對話框的背景遮罩
在 <dialog> 元素或選取器後面使用 ::，再接續 backdrop 即可選取到這個偽元素並進行背景遮罩的樣式設定。
以下案例便是利用 ::backdrop 將對象選取出來並進行樣式的改變。
小提醒
必須 JavaScript 執行 showModal() 才能看到這個偽元素。
基本寫法
html
<dialog id="modal">
<p>確定要刪除嗎？</p>
<button onclick="modal.close()">關閉</button>
</dialog>css
dialog::backdrop {
background: rgb(0 0 0 / 0.5);
backdrop-filter: blur(4px);
}js
document.querySelector('#modal').showModal();必須用 showModal() 開啟，遮罩層才會存在；用一般方式顯示的對話框沒有這一層。
與自製遮罩的差別
| 比較項目 | ::backdrop | 自己疊一層 |
|---|---|---|
| 需要額外標籤 | 否 | 是 |
| 層級問題 | 由瀏覽器置頂 | 要自行處理 |
| 背景捲動鎖定 | 內建 | 要自行處理 |
小提醒
必須 JavaScript 執行 showModal() 才能看到這個偽元素。
常見問題
為什麼設定了卻看不到效果？
因為對話框必須以 showModal() 開啟。用一般方式顯示 <dialog> 時不會產生遮罩層，也就選不到這個偽元素。
它和自己做一層遮罩有什麼不同？
它由瀏覽器產生並置於頂層，不必處理層級與捲動鎖定，也不會被父層的樣式影響。自製遮罩則常常要與 定位 和溢出設定纏鬥。
可以做出模糊背景嗎？
可以，在這個偽元素上加 backdrop-filter 即可，通常再搭配半透明底色。要留意模糊範圍大時的效能。
