全屏API更改默认颜色

Question

我使用fullscreen api，边框的默认颜色为黑色，如下图所示：

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

我想将此背景颜色更改为其他颜色。假设div有id #content，我尝试使用

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

但这对我不起作用。

如何更改颜色？

Answer 1

您需要将:fullscreen CSS伪类与供应商信息一起使用。您可以看到一个很好的教程，其中包含示例here和文档here。

我已将以下内容添加到your example，这对我有用：

#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;
}