html - 使用 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属性设置为默认值以外的值。这曾经是通过设置 background-color 来普遍完成的。应用于使用 :fullscreen pseudo-class 选择的全屏元素的属性, 但现在正确的做法是修改元素的关联 ::backdrop peudo-element .

#container::backdrop {
    background-color: rgba(255,255,255,0);
}

请注意 :fullscreen伪类仍然用作选择器来改变全屏元素的其他属性，但不能可靠地导致任何 background - 要呈现的相关属性。 (如果你想变得非常健壮，你可以将你的背景应用于 ::backdrop 和 :fullscreen 。)

因此，要将背景颜色应用于任何全屏元素(即，不将我们的样式限制到任何感兴趣的特定元素)，并支持不支持 ::backdrop 的浏览器或者不支持 :fullscreen背景样式，你可以这样做:

:fullscreen, ::backdrop {
    background-color: rgba(255,255,255,0);
}