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

【问题标题】：Background/element goes black when entering Fullscreen with HTML5使用 HTML5 进入全屏时背景/元素变黑
【发布时间】：2013-04-16 07:09:22
【问题描述】：

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

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。

【问题讨论】：

标签： html google-chrome fullscreen

【解决方案1】：

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

如果要使背景颜色不同，则必须指定 CSS 规则以将 background-color 属性设置为默认值以外的值。所以，在你的情况下：

#container:fullscreen {
    background-color: rgba(255,255,255,0);
}
#container:-webkit-full-screen {
    background-color: rgba(255,255,255,0);
}
#container:-moz-full-screen {
    background-color: rgba(255,255,255,0);
}

应该可以解决问题。（确保您使用适当的供应商版本——:-webkit-full-screen 和 :-moz-full-screen——直到规范最终确定；see MDN for more information。）

事实上，也许只是

*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    background-color: rgba(255,255,255,0);
}

@DevilishDB 编辑：使用 rgba 作为透明 BG 并添加 * 选择器以使之前的事情起作用

【讨论】：

我的容器仅用作容纳所有内容的结构元素（无视觉样式），并且需要透明背景。我可以设置background-color: transparent吗？
您可以使用:fullscreen 伪类。我将编辑我的答案。
还是没有运气！我试图重现 jsFiddle 中发生的事情，但不幸的是它不会让我将应用程序全屏显示。由于container div 基本上是整个页面，我尝试将选择器切换到<body> 标记以查看它是否会有所作为，但我似乎仍然无法让它不是黑色的。我什至找不到在 DOM 检查器中应用黑色的位置。还有其他建议吗？
@JodyHeavener Fiddle 不会全屏，因为 iframe 内容不允许在没有特殊 HTTP 标头的情况下启动全屏。但是，您可以通过转到http://fiddle.jshell.net/[ID]/[versionNum]/show/（例如，fiddle.jshell.net/gtCSs/1/show）将您的小提琴视为一个独立页面 - 或者只需使用浏览器的右键单击菜单“在新标签中打开框架”或类似的。跨度>
在我最近的项目中，它在 webkit 中增加了 1 个步骤。我将全屏应用于 body 元素，我需要将高度和宽度设置为 100%，以便它吞没屏幕并覆盖默认的黑色：body:-webkit-full-screen { background-color: rgba(255,255,255, 0);宽度：100%；高度：100%； }

【解决方案2】：

我不知道您问题的确切答案，但这些信息可能会有所帮助：

enterFullscreen(document.body); 也有类似的黑色背景问题。在我将行更改为enterFullscreen(document.documentElement); 后，背景颜色变得正常。我使用的css是body{background-color: #D7D7D7; margin: 0px;}。

【讨论】：

对于信息，我刚刚在reveal.js中进行了这个调整，它解决了一个问题，即仅在Chrome中全屏模式下演示背景变黑
我不明白为什么 Chrome 仍然使用 document.body 这样做，但它对我来说也适用于 document.documentElement。如果您按 F11（按菜单全屏），Chrome 不会变黑，但只有 JavaScript document.body 才会变黑。即使 :fullscreen body 设置为透明。

【解决方案3】：

不知道为什么，但是body元素的背景好像没有全屏显示或者变透明了……

我通过为 html 元素设置背景颜色来解决这个问题，它工作得很好：

html {
    background-color: #ffffff;
    /* Or any color / image you want */
}

【讨论】：

接受的答案有效，但也有效。很想知道为什么（似乎特定于 webkit）...

【解决方案4】：

主要解决方案对我不起作用:-(我找到了另一个解决方案，但是是的，在 css 中：

:-webkit-full-screen, :fullscreen, :-ms-fullscreen, :-moz-full-screen {
position: fixed;
width: 100%;
height: 100%;
top: 0; 
background: none;}

我知道这是为了我的元素的位置，但我不确定。希望对某人有所帮助。再见，谢谢。

【讨论】：

【解决方案5】：

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

将其添加到 CSS 文件中确实有效

::backdrop
{
    background-color: white;
}

【讨论】：

谢谢，这正是我要找的假名
谢谢！真的。正是这样。我推荐这个答案，大家

【解决方案6】：

我花了好几个小时才找到解决这个问题的窍门。

我这样做结束了：

将白色固定在背景上
并使用 z-index 将其向下推

然后：

为 html 页面内容修复白色
并使用 z-index 将其向上推（背景上方）

它适用于 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;
}

【讨论】：

【解决方案7】：

接受的答案适用于大多数浏览器，但在我的测试中不适用于 IE11。对我来说，这适用于当前的 Chrome、Firefox、Edge、IE 11 和 iOS 上的 Safari：

CSS：

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 元素。

【讨论】：