html - 全屏 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;
}