使用 HTML5 进入全屏时背景/元素变黑

Question

我正在使用以下脚本让我的网络应用全屏显示…

 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(); }); 单击触发按钮时，我实际上进入了全屏，只有我的元素变黑了。就是黑，没别的。

有人知道怎么修这个东西吗？

仅供参考，我正在使用 Chrome 27。

原文由 Jody Heavener 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

浏览器全屏“视觉环境”的默认背景色为黑色。你的内容确实 _在那里_，但它目前是黑色背景上的黑色文本，所以你看不到它（尝试突出显示或按 Ctrl+A 自己看看）。

如果要使背景颜色不同，则必须指定 CSS 规则以将 background-color 属性设置为默认值以外的值。这曾经通过设置一个 background-color 属性来普遍完成，该属性应用于使用 :fullscreen 伪类 选择的全屏元素，但现在正确的方法是修改元素的关联 ::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);
}

原文由 apsillers 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

其他答案都不适合我（Chrome 70 或 FF 63）

将此添加到 CSS 文件确实有效

::backdrop
{
    background-color: white;
}

原文由 flappix 发布，翻译遵循 CC BY-SA 4.0 许可协议