web-dev-qa-db-ja.com

HTML5でフルスクリーンに入ると、背景/要素が黒くなる

次のスクリプトを使用して、Webアプリを全画面表示にします...

_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。

htmlgoogle-chromefullscreen
21
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);
}

トリックを行う必要があります。 （適切なベンダーバージョンを使用していることを確認してください-:-webkit-full-screenおよび:-moz-full-screen-仕様が確定するまで 詳細についてはMDNを参照してください 。）

実際、多分ちょうど

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

@DevilishDBによる編集：透明なBGにrgbaを使用し、前のものを機能させるために*セレクターを追加しました

17
apsillers

質問の正確な答えはわかりませんが、この情報が役立つ場合があります。

enterFullscreen(document.body);で同様の黒い背景の問題が発生しました。行をenterFullscreen(document.documentElement);に変更すると、背景色が正常になりました。私が使用したcssはbody{background-color: #D7D7D7; margin: 0px;}。

13
feilong

理由はわかりませんが、body要素の背景が全画面表示されない、または透明にならないようです...

私はhtml要素に背景色を設定することでこれを修正しました、そしてそれはうまくいきます：

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

他の答えはどれもうまくいきません（Chrome 70またはFF 63）

これをCSSファイルに追加すると機能します

::backdrop
{
    background-color: white;
}
8
flappix

メインの解決策は私にはうまくいきませんでした:-(私は別の解決策を見つけましたが、はい、CSSで：

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

これは私の要素の位置付けに関するものだと理解していますが、確かではありません。誰かに助けを願っています。さようなら。

2
Drako

私はこの問題のトリックを見つけるのに何時間も費やしました。

私はそれを終えて終わりました：

  • 背景に白い色を修正する
  • そして、z-indexを使用して、それをプッシュダウンします

次に：

  • HTMLページコンテンツの白色を修正する
  • そしてz-indexを使用して、押し上げます（背景の上）

FirefoxとChromeで動作します

::backdrop {
    z-index:0;  
    background-color: white !important;
}

html, *:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    background-color: white !important;
    z-index:1;
}
1
Rainbow