Pseudoelement CSS ::backdrop

Pseudoelement CSS ::backdrop reprezentuje obszar tła pod elementem, który został wyświetlony na warstwie wierzchniej w oknie przeglądarki. Odnosi się do następujących przypadków:

• Element został wyświetlony w trybie pełnoekranowym za pomocą metody requestFullscreen() z API Fullscreen.
• Okno dialogowe dialog zostało wyświetlone za pomocą jego metody showModal().
• Wyskakujący element został wyświetlony za pomocą metody showPopover().

Przykład użycia ::backdrop

W tym przykładzie naciśnięcie przycisku Pokaż okno spowoduje wyświetlenie okna dialogowego dialog i zmianę tła w całym obszarze widoku pod tym oknem na kolor jasnoróżowy.

<style>
  ::backdrop {background-color: lightpink}
</style>
...
<button onclick="document.getElementById('dialog').showModal()">Pokaż okno</button>
  <dialog id="dialog">
  <p>Witaj na naszej stronie :)</p>
  <form method="dialog">
    <button>Witam</button>
  </form>
</dialog>

Efekt:

Składnia ::backdrop

Składnia pseudoelementu ::backdrop:

::backdrop {...}