::backdrop | CSS-Tricks 中文

::backdrop CSS 伪元素创建一个覆盖整个视口的背景，并在 <dialog>、具有 popup 属性的元素或任何使用全屏 API 进入全屏模式的元素下方立即渲染。

dialog::backdrop {
  background-color: darkorange;
}

底线：当浏览器处于全屏模式时，我们获得了一些东西可以用来挂钩，以便为元素后面的完整背景设置样式。当我们说“全屏模式”时，我们指的是浏览器占据监视器的整个屏幕——不要与浏览器视口混淆。通常，全屏模式是由操作系统中的一个选项触发的，用于扩展窗口。

Showing the top part of the Safari browser with the green dot button over at the left of the browser window open with options to enter full screen, move the window to the left side of the screen, or move the window to the right side of the screen. — MacOS 在窗口的 UI 中提供了一个选项来将该窗口扩展到全屏。

::backdrop 不继承自任何元素，也不被继承。因此，不会发生任何可能导致两个元素的背景之间发生冲突的级联。

对话框背景的样式

考虑 HTML 中以下 <dialog> 元素

<dialog>
  <h2>I'm a dialog window</h2>
  <button onclick="closeDialog()">Close</button>
</dialog>  

<button onclick="openDialog()">Open dialog</button>

::backdrop 可用于在对话框使用 HTMLDialogElement.showModal() 显示时设置其后面的样式，该方法目前处于实验阶段，但正是它提供了 ::backdrop。

var dialog = document.querySelector('dialog');
function openDialog() {  
  dialog.showModal();
}
function closeDialog() {  
  dialog.close();
}

现在，如果我们点击按钮并打开对话框，以下 CSS 就可以工作

dialog::backdrop {
  background-color: darkorange;
  background-image: linear-gradient(
    130deg,#ff7a18,
    #af002d 41.07%,
    #319197 76.05%
  );
}

在以下演示中打开 <dialog> 元素，并查看我们应用于对话框背景的样式

全屏模式下元素背景的样式

当媒体（如图像和视频）进入全屏模式时，它们可能不会覆盖整个视口。例如，周围可能存在空白空间。目前，Chrome 对背景的默认样式如下所示

dialog::backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.1);
}

使用 ::backdrop，我们可以自己设置样式，或者简单地调整现有的样式。例如，稍微深一点的背景怎么样？

video::backdrop {
  background: hsla(0, 0%, 0%, .5);
}

以下演示中的背景是可见的，因为视频的宽度比整个视口的宽度窄。

变换、动画和悬停状态

由于我们可以在此伪元素上声明的属性没有限制，因此可以向背景添加动画和变换——甚至可以在悬停等状态下更改样式

.element::backdrop {
  animation: move 5s infinite linear paused both;
  background: conic-gradient(red, orange, yellow, green, blue);
}

.element:hover::backdrop {
  animation-play-state: running;
}

@keyframes move {
  50% {
    transform: scale(0.9);
  }  
}