背景/元變黑，當HTML5

我用下面的腳本，使我的web應用程序去全屏進入全屏...背景/元變黑，當HTML5

function enterFullscreen(){ 
    var element = document.getElementById('container'); 
    if (element.mozRequestFullScreen) { 
     element.mozRequestFullScreen(); 
    } else if (element.webkitRequestFullScreen) { 
     element.webkitRequestFullScreen(); 
    } 
    l('Fullscreen Mode entered','internal'); 
}

所以，當我通過$('button.toggle-fullscreen').click(function(){ enterFullscreen(); });點擊觸發按鈕怎麼辦實際上進入全屏，只有我的元素變黑。只是黑色，沒有別的。

任何人都知道如何解決這個問題？

僅供參考我使用的是Chrome 27

來源

2013-04-23 Jody Heavener

瀏覽器的全屏「視覺環境」的默認背景顏色爲黑色。您的內容實際上是有，但它目前是黑色背景上的黑色文本，所以您看不到它（嘗試突出顯示或按Ctrl+A親自查看）。

如果要使背景具有不同的顏色，則必須指定CSS規則以將background-color屬性設置爲默認值以外的值。所以，在你的情況：

#container:fullscreen { 
    background-color: rgba(255,255,255,0); 
} 
#container:-webkit-full-screen { 
    background-color: rgba(255,255,255,0); 
} 
#container:-moz-full-screen { 
    background-color: rgba(255,255,255,0); 
}

應該做的伎倆。（請確保您使用相應的供應商版本（S） - :-webkit-full-screen和:-moz-full-screen - 直到規範最終確定; see MDN for more information）

事實上，也許只是

*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen { 
    background-color: rgba(255,255,255,0); 
}

編輯由@DevilishDB：使用 RGBA的透明BG，並添加*選擇，使以前的事情工作

來源

2013-04-23 18:25:33 apsillers

我的容器僅作爲結構元素來容納一切（無視覺樣式），並且需要透明背景。我可以設置「背景顏色：透明」嗎？ – 2013-04-23 18:29:55

您可以使用['：fullscreen']（https://developer.mozilla.org/en-US/docs/CSS/:fullscreen）僞類。我會編輯我的答案。 – apsillers 2013-04-23 19:38:32

還是沒有運氣！我試圖重現jsFiddle中發生的事情，但不幸的是我不能讓應用程序全屏顯示。由於'container' div基本上是整個頁面，所以我嘗試將選擇器切換到''標籤以查看它是否會產生變化，但我仍然無法使其變爲黑色。我似乎甚至無法找到在DOM檢查器中應用黑色的位置。還有其他建議嗎？ – 2013-04-25 00:45:38

我不知道確切的回答你的問題，但這些信息可能會有所幫助：

我與enterFullscreen(document.body);有類似的黑色背景問題。在將行更改爲enterFullscreen(document.documentElement);後，背景顏色變得正常。我用的css是body{background-color: #D7D7D7; margin: 0px;}。

來源

2014-07-13 21:03:53 feilong

有關信息，我只是在reveal.js中做了這個調整，它修復了在Chrome中全屏模式下演示文稿背景變黑的問題 – Garry 2015-09-23 15:54:27

我不是不知道爲什麼Chrome仍在使用document.body ，但它也適用於document.documentElement。如果按F11（全屏菜單），Chrome變得不黑，但只有使用JavaScript document.body纔會變黑。即使：全屏主體設置爲透明。 – Robert 2015-12-17 15:06:17

不知道爲什麼，但似乎身體元素的背景不在全屏顯示或者變得透明......

我用背景色設置爲html元素固定這一點，它工作得很好：

html { 
    background-color: #ffffff; 
    /* Or any color/image you want */ 
}

來源

2016-05-30 09:57:19 Miaow

接受的答案有效，但這也是如此。想知道爲什麼（似乎webkit具體）... – Eclectic 2016-07-23 17:05:02

主要解決沒有工作給我:-(我找到了另一種解決方案，但肯定的，在CSS：

:-webkit-full-screen, :fullscreen, :-ms-fullscreen, :-moz-full-screen { 
position: fixed; 
width: 100%; 
height: 100%; 
top: 0; 
background: none;}

我明白這是爲我的元素的位置，但我不知道。希望對某人有所幫助。再見，謝謝。

來源

2016-08-16 09:57:00 Drako

背景/元變黑，當HTML5

回答

相關問題