全屏 API 更改默认颜色

Question

我正在使用 fullscreen api and the default color for the border is black as seen in this image:

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

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

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

但这对我不起作用。

如何更改颜色？

Answer 1

您需要使用带有供应商信息的 :fullscreen CSS 伪 class。你可以看到一个很好的教程，里面有一个例子 here and docs 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;
}

全屏 API 更改默认颜色

Fullscreen API change default color

html

css

html5-fullscreen