32

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

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。

4

7 回答 7

28

浏览器全屏“视觉环境”的默认背景颜色为黑色。您的内容实际上是存在的，但它目前是黑色背景上的黑色文本，因此您看不到它（尝试突出显示或按下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 并添加 * 选择器以使之前的工作正常

于 2013-04-23T18:25:33.150 回答
21

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

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

于 2014-07-13T21:03:53.180 回答
19

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

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

::backdrop
{
    background-color: white;
}
于 2018-10-31T16:01:00.343 回答
11

不知道为什么，但是body元素的背景似乎没有全屏显示或者变得透明......

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

html {
    background-color: #ffffff;
    /* Or any color / image you want */
}
于 2016-05-30T09:57:19.527 回答
3

我花了几个小时来寻找解决这个问题的窍门。

我这样做结束了：

  • 将白色固定到背景
  • 并使用 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;
}
于 2019-09-11T20:58:19.267 回答
2

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

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

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

于 2016-08-16T09:57:00.450 回答
0

接受的答案适用于大多数浏览器，但在我的测试中不适用于 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);
    }
};

编辑：添加了不适用于使用body元素的 iOS/Safari 例外。

于 2020-04-28T07:40:04.640 回答