使用HTML5进入全屏时，背景/元素变黑 [英] Background/element goes black when entering Fullscreen with HTML5

问题描述

 函数enterFullscreen（）{
 var element = document.getElementById（'container'）; 
 if（element.mozRequestFullScreen）{
 element.mozRequestFullScreen（）; 
} else if（element.webkitRequestFullScreen）{
 element.webkitRequestFullScreen（）; 
} 
 l（'进入全屏模式'，'内部'）; 
} 
  

所以，当我通过点击触发按钮时， $（'button.toggle-fullscreen'）。click（function（）{enterFullscreen（）;}）; 我实际上进入全屏，只有我的元素变黑。只有黑色，没有别的。

任何人都知道如何解决这个问题？

FYI我使用Chrome 27 。

解决方案

浏览器全屏可视化环境的默认背景颜色是黑色。您的内容实际上是 ，但它目前是黑色背景上的黑色文本，因此您无法看到它（尝试突出显示或按下 Ctrl + A 如果你想让背景变成不同的颜色，你必须指定一个CSS规则来设置背景颜色。 属性为默认值以外的值。所以，在你的情况：
$ b

#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获取更多信息

实际上，也许只是


  * ：全屏，*： -  webkit-full-screen，*： -  moz-full-screen {
 background-color：rgba（255,255,255,0）; 
} 
  

编辑@DevilishDB：
使用rgba作为透明BG，添加*选择器以使前面的工作成功


I'm using the following script to make my web app go fullscreen...

function enterFullscreen(){
    var element = document.getElementById('container');
    if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
    l('Fullscreen Mode entered','internal');
}

And so, when I click the trigger button via $('button.toggle-fullscreen').click(function(){ enterFullscreen(); }); I do in fact enter fullscreen, only my element goes black. Just black, nothing else.

Anyone know how to fix this?

FYI I'm using Chrome 27.

解决方案

The default background color of the browser's full-screen "visual environment" is black. Your content actually is there, but it's currently black text on black background, so you can't see it (try highlighting or pressing Ctrl+A to see for yourself).

If you want to make the background a different color, you must specify a CSS rule to set the background-color property to something other than the default. So, in your case:

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

should do the trick. (Make sure you use the appropriate vendor version(s) -- :-webkit-full-screen and :-moz-full-screen -- until the spec finalizes; see MDN for more information.)

In fact, maybe just

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

EDIT by @DevilishDB: used rgba for a transparent BG and added the * selector to make the previous thing work

这篇关于使用HTML5进入全屏时，背景/元素变黑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！