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

我正在使用以下脚本使我的web应用程序全屏运行

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'）单击触发器按钮时，单击（function（）{enterFullscreen（）；}）我确实进入了全屏，只有我的元素变黑了。只有黑色，没有别的

有人知道怎么解决这个问题吗

仅供参考，我使用的是Chrome 27。
浏览器全屏“视觉环境”的默认背景色为黑色。您的内容实际上在那里，但它当前是黑色背景上的黑色文本，因此您无法看到它（请尝试高亮显示或按
Ctrl+A
自行查看）

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

#容器：全屏{
背景色：rgba（255255,0）；
}
#容器：-webkit全屏{
背景色：rgba（255255,0）；
}
#容器：-moz全屏{
背景色：rgba（255255,0）；
}

我们应该做到这一点。（确保使用适当的供应商版本--
：-webkit全屏
和
：-moz全屏
--直到规范最终确定；）

事实上，也许只是

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

由@DevilishDB编辑：
将rgba用于透明背景，并添加了*选择器，以使前面的内容正常工作
我不知道您问题的确切答案，但此信息可能会有所帮助：

我在
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 */
}

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

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

我知道这是为了我的元素的位置，但我不确定。希望能对某人有所帮助。再见，谢谢。
其他答案都不适合我（Chrome 70或FF 63）

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

::backdrop
{
    background-color: white;
}

我花了几个小时来寻找解决这个问题的方法

最后，我这样做：


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

然后：


将白色固定到html页面内容
并使用z指数将其向上推（背景上方）

它在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;
}

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

CSS:

body {
    background-color: #ffffff;
}

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);
    }
};

JS:

body {
    background-color: #ffffff;
}

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
元素。
我的容器仅用作保存所有内容的结构元素（无视觉样式），并且需要透明的背景。我可以设置
背景颜色：透明吗？
？您可以使用伪类。我将编辑我的答案。仍然不走运！我试图重现JSFIDLE中发生的情况，但不幸的是，它不允许我全屏显示应用程序。因为
容器
div基本上就是整个页面我尝试将选择器切换到
标记，以查看它是否会产生影响，但我似乎仍然无法使其不为黑色。我甚至无法找到在DOM检查器中应用黑色的位置。还有其他建议吗？@JodyHeavener Fiddle不会全屏显示，因为不允许iframe内容启动fullscreen没有特殊的HTTP头。但是，通过转到
http://fiddle.jshell.net/[ID]/[versionNum]/show/
（例如），或者使用浏览器的右键单击菜单“在新选项卡中打开框架”或者类似的。在我最近的项目中，它在webkit中增加了一个步骤。我将全屏应用于body元素，我需要将高度和宽度设置为100%，以便它覆盖屏幕并覆盖默认的黑色：body:-webkit全屏{背景色：rgba（255255,0）；宽度：100%；高度：100%；}作为信息，我刚刚在reveal.js中做了这个调整，它修复了Chrome Only全屏模式下演示文稿背景变黑的问题。我不知道为什么Chrome仍然在document.body上这样做，但它在document.documentElement上也对我有效。如果按F11键（菜单全屏），Chrome不会变黑，但只有使用JavaScript document.body时，它才会是黑色的。即使：全屏主体设置为透明。接受的答案有效，但这也有效。我很想知道原因（似乎是webkit特有的）…谢谢，这正是我要找的伪汉克斯！真的。正是这样。我推荐这个答案，每个人都知道，这很有效！