问题描述
函数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');
}
#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进入全屏时,背景/元素变黑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!