9

My site has a tiling background image applied, which can be seen behind photos as they transition (most photos fill the background). Have a look here: http://new.element17.com.

When viewed in fullscreen, though (using the button in the top-right in Chrome/Mozilla), this background image disappears and the background is then just #fff. How can I style this?

Based on some reading, I've tried the following:

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

But this doesn't result in any change. Any ideas?

4

2 回答 2

8

我很确定如果您让某个元素进入全屏模式，而不是在文档对象上执行此操作，那么您可以从那里开始设置样式。

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

另一个有趣的事实：文档说 Gecko 和 Webkit 使用（前缀）:full-screen作为伪类，但实际的 W3C 提案使用:fullscreen- 单词之间没有破折号。为了安全起见，我都用过...

于 2012-11-22T01:52:25.303 回答
1

我想得到你想要的，添加你的背景，#slideshow因为这是div全屏时的容器。

#slideshow {
    background: url("../images/olive.jpg") repeat scroll 0 0 transparent;
}
于 2012-11-22T01:28:51.577 回答