全屏样式的身体元素？

Question

我的网站应用了平铺背景图像,可以在照片背后看到它们过渡(大多数照片填充背景).看看这里: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);}

但这不会导致任何变化.有任何想法吗？

Answer 1

我很确定如果你让某个元素进入全屏模式,而不是在文档对象上进行,你就可以从那个样式开始.

您需要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);}

我已经整理了一个快速示例页面,显示了这个实例:示例(只需使用转义键退出全屏 - 我没有打扰退出按钮)

此外,根据全屏模式下的MDN文档,没有IE版本支持全屏模式,Opera使用非前缀版本进行触发,但不支持伪类.如果要完全支持Opera,可能需要考虑在进入全屏时手动向类html或body元素添加类,并在退出时将其删除.

另一个有趣的事实是:文档说Gecko和Webkit使用(前缀):full-screen伪类,但实际的W3C提议使用:fullscreen- 在单词之间没有划线.我用过这两个,只是为了安全......