css - 全屏造型 body 元素？

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使用无前缀版本触发，不支持伪类。如果您想完全支持 Opera，您可能需要考虑在进入全屏时手动向 html 或 body 元素添加一个类，并在退出时将其删除。

另一个有趣的事实:the docs说 Gecko 和 Webkit 使用(前缀):full-screen 作为伪类，但实际的 W3C 提案使用 :fullscreen——单词之间没有破折号。我都用过，只是为了安全......