::backdrop

Псевдоэлемент ::backdrop отвечает за подложку под элементами, всплывающими на верхний слой страницы. Типа <dialog> в режиме модального окна, поповеров или открытых на весь экран <video>.

        
          
          dialog::backdrop {  background-image: linear-gradient(    130deg,    #123E66,    #593273 41.07%,    #623D45 76.05%  );}
          dialog::backdrop {
  background-image: linear-gradient(
    130deg,
    #123E66,
    #593273 41.07%,
    #623D45 76.05%
  );
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Псевдоэлемент ::backdrop подсказывает пользователю, что сейчас его внимание должно быть направлено на открывшийся элемент. Вся остальная страница перекрывается, чтобы не отвлекать от основного действия. К тому же, остальной контент, как правило, недоступен для взаимодействия.

Стили по умолчанию:

        
          
          dialog::backdrop {  position: fixed;  inset: 0px;  background: rgba(0, 0, 0, 0.1);}
          dialog::backdrop {
  position: fixed;
  inset: 0px;
  background: rgba(0, 0, 0, 0.1);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Подложка перекрывает собой всю доступную область просмотра (вьюпорт), а также фиксирована, чтобы при прокрутке оставаться на месте. Эти свойства лучше не менять, чтобы не удивлять пользователя и сохранить основную функцию псевдоэлемента.

Как правило, достаточно изменить фоновую заливку или показать картинку, чтобы было красиво.

Ничего затейливого: указываете элемент и через два двоеточия пишите backdrop. Для стилизации доступны все CSS-свойства, но постарайтесь не трогать позиционирование.

Можно реагировать на действия пользователя. В демо ниже попробуйте понажимать Tab и Shift Tab. Когда фокус будет попадать на кнопку в открытом диалоге, цвета градиента будут меняться местами.

        
          
          dialog:focus-within::backdrop {  background-image: linear-gradient(    130deg,    #123E66,    #593273 41.07%,    #623D45 76.05%  );}
          dialog:focus-within::backdrop {
  background-image: linear-gradient(
    130deg,
    #123E66,
    #593273 41.07%,
    #623D45 76.05%
  );
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать