我正在使用以下脚本来使我的网络应用程序全屏...
function enterFullscreen(){
var element = document.getElementById('container');
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
l('Fullscreen Mode entered','internal');
}
因此，当我通过$('button.toggle-fullscreen').click(function(){ enterFullscreen(); });单击触发按钮时，实际上我进入了全屏模式，但是我的元素变成了黑色。仅仅是黑色，没有其他东西。
有人知道如何解决这个问题吗？
FYI，我正在使用Chrome 27。
浏览器全屏“可视环境”的默认背景颜色是黑色。 实际上您的内容在那里，但当前是黑色文本在黑色背景上，因此您无法看到它（尝试高亮或按Ctrl + A查看自己）。
如果您想使背景成为其他颜色，则必须指定CSS规则以将background-color属性设置为不同于默认值的值。 曾经通过设置应用于使用:fullscreen伪类选择的全屏元素的background-color属性来普遍执行此操作，但现在正确的方法是修改元素的关联::backdrop伪元素。
#container::backdrop {
background-color: rgba(255,255,255,0);
}
请注意，:fullscreen 伪类仍然可以作为选择器来更改全屏元素的其他属性，但无法可靠地使任何与 background 相关的属性呈现出来。（如果您希望非常健壮，则可以将背景应用于 ::backdrop 和 :fullscreen）。
因此，为了将背景颜色应用于任何全屏元素（即不限制我们的样式只适用于特定的感兴趣元素），并支持那些不支持 ::backdrop 或者不支持 :fullscreen 背景样式的浏览器，您可以这样做：
:fullscreen, ::backdrop {
background-color: rgba(255,255,255,0);
}
对我来说，其他的答案都没有用（Chrome 70或FF 63）
将这个添加到CSS文件中确实起作用。
::backdrop
{
background-color: white;
}
我不知道你问题的确切答案，但这些信息可能会有所帮助:
我在使用enterFullscreen(document.body);时，也遇到了类似的黑色背景问题。当我将该行更改为enterFullscreen(document.documentElement);后，背景颜色变得正常。
我使用的CSS是body {background-color: #D7D7D7; margin: 0px;}。
不知道为什么，但是在全屏模式下或者变成透明的时候，body元素的背景貌似没有显示出来...
我通过给html元素设置背景颜色来解决这个问题，现在一切都正常了：
html {
background-color: #ffffff;
/* Or any color / image you want */
}
我花了几个小时寻找解决这个问题的方法。
最终我采取以下做法：
然后：
在Firefox和Chrome上，这对我起作用了。
::backdrop {
z-index:0;
background-color: white !important;
}
html, *:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
background-color: white !important;
z-index:1;
}
.dialog-content div的dialog元素，我使用contentNode.requestFullScreen()使其全屏，但是所有没有定义背景颜色的内容都变成了黑色。 z-index似乎没有帮助，但设置background-color: white意味着我的黑白内容又可以看到了。 - Neek主要方案对我没用 :-( 我找到了另一个解决方案，但是确实在CSS中:
:-webkit-full-screen, :fullscreen, :-ms-fullscreen, :-moz-full-screen {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: none;}
我理解这是关于我的元素位置的问题，但我不确定。希望能对某人有所帮助。再见，谢谢。
body {
background-color: #ffffff;
}
JS：
function openFullscreen () {
let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
let elem = isSafari ? document.documentElement : document.body;
let openFn = elem.requestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen || elem.msRequestFullscreen;
if (openFn) {
openFn.call(elem);
}
};
编辑：增加了对iOS/Safari的例外，它不能使用body元素。
:fullscreen伪类。我会编辑我的回答。 - apsillerscontainerdiv本质上是整个页面，我尝试将选择器切换到<body>标签，以查看是否会有所不同，但我仍然无法使其不是黑色。我甚至似乎找不到DOM检查器中应用黑色的位置。还有其他建议吗？ - Jody Heavenerhttp://fiddle.jshell.net/[ID]/[versionNum]/show/（例如，http://fiddle.jshell.net/gtCSs/1/show/）将您的Fiddle作为独立页面查看 - 或者只需使用浏览器的右键菜单选择“在新标签页中打开框架”或类似选项。 - apsillersbody是你全屏的确切元素，否则对body应用样式是没有帮助的。 - apsillers