我的网站应用了平铺背景图像,可以在照片转换后看到(大多数照片填充背景).看看这里：
http://new.element17.com.
但是,在全屏查看时(使用Chrome / Mozilla右上角的按钮),此背景图像消失,背景只有#fff.我该如何设计呢？
基于一些阅读,我尝试了以下内容：
body:-webkit-full-screen {background-image:url(../images/olive.jpg);}
body:-moz-full-screen {background-image:url(../images/olive.jpg);}
body:-ms-full-screen {background-image:url(../images/olive.jpg);}
body:-o-full-screen {background-image:url(../images/olive.jpg);}
body:full-screen {background-image:url(../images/olive.jpg);}
但这不会导致任何变化.有任何想法吗？
解决方法
我很确定如果你让某个元素进入全屏模式,而不是在文档对象上进行,你就可以从那个样式开始.
您需要在要全屏显示的元素上触发requestFullScreen方法.在这种情况下,它是根html元素.这是我在需要时拼凑的方法：
function enter_full_screen(){
elem = document.getElementsByTagName('html')[0];
calls = ['requestFullScreen','webkitRequestFullScreen','mozRequestFullScreen'];
for(var i = 0; i < calls.length; i++){
if(elem[calls[i]]){
elem[calls[i]]();
return;
}
}
}
然后风格将成为：
:-webkit-full-screen body {background-image:url(../images/olive.jpg);}
:-moz-full-screen body {background-image:url(../images/olive.jpg);}
:full-screen body {background-image:url(../images/olive.jpg);}
我已经把一个快速示例页面显示在行动中：Example(只需使用转义键退出全屏 – 我没有打扰退出按钮)
此外,根据全屏模式的the MDN docs,没有IE版本支持全屏模式,Opera使用非前缀版本进行触发,但不支持伪类.您可能需要考虑在进入全屏时手动将类添加到html或body元素,并在退出时将其删除,如果您想完全支持Opera.
另一个有趣的事实：the docs说Gecko和Webkit使用(前缀)：全屏为伪类,但实际的W3C提议使用：全屏 – 字之间没有划线.我用过这两个,只是为了安全……
