html - 全屏 API 更改默认颜色

Question

我正在使用全屏 api，边框的默认颜色是黑色，如下图所示：

图片来自http://blogs.sitepointstatic.com/examples/tech/full-screen/index2.html。

我想将此背景颜色更改为不同的颜色。假设 div 有 id #content，我试过使用

#content::backdrop {
  background-color: red;
}

但这对我不起作用。

如何更改颜色？

Answer 1

您需要使用:fullscreen带有供应商信息的 CSS 伪类。您可以在此处查看带有示例的不错的教程，并在此处查看文档。

我在您的示例中添加了以下内容，它对我有用：

#myimage:fullscreen {
  background-color: green;
  width: 100vw;
  height: 100vh;
}

#myimage:-webkit-full-screen {
  background-color: green;
  width: 100vw;
  height: 100vh;
}

#myimage:-moz-full-screen {
  background-color: green;
  width: 100vw;
  height: 100vh;
}

#myimage:-ms-fullscreen {
  background-color: green;
  width: 100vw;
  height: 100vh;
}