css – 全屏样式的body元素？

我的网站应用了平铺背景图像,可以在照片转换后看到(大多数照片填充背景).看看这里： 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提议使用：全屏 – 字之间没有划线.我用过这两个,只是为了安全……

原文地址：https://www.jb51.cc/css/215922.html