在全屏造型身體元素？

我的網站應用了平鋪背景圖片，可以在照片轉換後看到它們（大多數照片填充背景）。看看這裏：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);}

但是，這不會導致任何改變。有任何想法嗎？

來源

2012-11-15 NaOH

您在瀏覽此瀏覽器時使用了哪種瀏覽器？在Chrome for Windows中，背景圖像對我來說仍然不錯。 –

我在Windows中使用Chrome ...讓我清除緩存，1秒。 – NaOH

沒有骰子，我很害怕：http://i.imgur.com/tou8X.jpg – NaOH

我，如果你做出了一定的元素進入全屏模式，而不是做它的文檔對象上相當肯定，你就可以從該樣式下來。

您需要在要製作全屏的元素上觸發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 - 單詞之間沒有短劃線。爲了安全起見，我使用了兩種方法...

來源

2012-11-22 01:52:25 Adam

這給了我9/10的方式，現在它工作得很好！非常感謝你！我使用的Fullscreen插件允許我將'body'標籤指定爲要發送到全屏的元素，並將'slideshow'元素的背景設置爲我想要的紋理。 – NaOH

顯然我必須等待19個小時才能獎勵你的賞金......我會盡快完成。再次感謝！ – NaOH

賞金頒發！ – NaOH

我想要得到你想要的，將你的背景添加到#slideshow，因爲這是div，它是全屏時的容器。

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

來源

2012-11-22 01:28:51 ScottS

謝謝！這與亞當的答案結合起來，它的工作。 – NaOH

在全屏造型身體元素？

回答

相關問題