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

我已经整理了一个快速示例页面，显示了这个：Example（只需使用转义键退出全屏 - 我没有打扰退出按钮）

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

另一个有趣的事实：the docs说Gecko和Webkit使用（前缀）:full-screen作为伪类，但实际的W3C提议使用:fullscreen - 单词之间没有划线。我用过这两个，只是为了安全......

Answer 2

我认为要获得您想要的内容，请将您的背景添加到#slideshow，因为这是div，当它全屏显示时就是容器。

#slideshow {
    background: url("../images/olive.jpg") repeat scroll 0 0 transparent;
}

全屏样式的身体元素？

2 个答案: