使用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.

Answer 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- 直到规范最终确定; 有关详细信息,请参阅MDN.)

事实上,也许只是

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

编辑@DevilishDB:使用rgba作为透明BG并添加了*选择器以使前一个工作正常

Answer 2

我不知道你问题的确切答案,但这些信息可能有所帮助:

我有类似的黑色背景问题enterFullscreen(document.body);.将线路更改为后,背景颜色变为正常enterFullscreen(document.documentElement);.我使用的CSS是body{background-color: #D7D7D7; margin: 0px;}.

Answer 3

不知道为什么,但似乎身体元素的背景不是全屏显示或变得透明......

我通过为html元素设置背景颜色来修复它,它工作得很好:

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

Answer 4

没有其他答案对我有用（Chrome 70或FF 63）

将此添加到CSS文件中确实可行

::backdrop
{
    background-color: white;
}