Hintergrund/Element wird schwarz, wenn sie mit HTML5

Vollbild eintritt ich das folgende Skript bin mit meinem Web-app Vollbild ...Hintergrund/Element wird schwarz, wenn sie mit HTML5

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

Und so geht zu machen, wenn ich die Auslösetaste über $('button.toggle-fullscreen').click(function(){ enterFullscreen(); }); klicken ich tun tatsächlich Vollbild eingeben, nur mein Element wird schwarz. Nur schwarz, sonst nichts.

Wer weiß, wie man das beheben kann?

FYI bin ich mit Chrome 27

Quelle

2013-04-23 Jody Heavener

Die Standardhintergrundfarbe des Vollbildes „visueller Umgebung“ des Browsers ist schwarz. Ihr Inhalt tatsächlich ist dort, aber es ist derzeit schwarzer Text auf schwarzem Hintergrund, so dass Sie es nicht sehen können (versuchen, Hervorhebung oder drücken Ctrl+A, um für sich selbst zu sehen).

Wenn Sie dem Hintergrund eine andere Farbe zuweisen möchten, müssen Sie eine CSS-Regel angeben, um die Eigenschaft background-color auf etwas anderes als den Standardwert festzulegen. Also, in Ihrem Fall:

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

sollte den Trick tun. (Stellen Sie sicher, dass Sie die entsprechenden Hersteller Version (en) - :-webkit-full-screen und :-moz-full-screen - bis die Spezifikation finalisiert; see MDN for more information.)

In der Tat, vielleicht auch nur

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

EDIT von @DevilishDB: verwendet rgba für eine transparente BG und hinzugefügt, um die * Wähler die vorige Arbeit

Quelle

2013-04-23 18:25:33 apsillers

Mein Container wird nur als Strukturelement verwendet, um alles zu speichern (keine visuellen Stile) und erfordert einen transparenten Hintergrund. Könnte ich 'background-color: transparent' einstellen? –

Sie können die Pseudo-Klasse [': fullscreen'] (https://developer.mozilla.org/en-US/docs/CSS/:fullscreen) verwenden. Ich werde meine Antwort bearbeiten. – apsillers

immer noch kein Glück! Ich habe versucht, zu reproduzieren, was in jsFiddle passiert, aber es wird mich leider nicht die App Vollbild nehmen lassen.Da das 'container'-div im Wesentlichen die gesamte Seite ist, habe ich versucht, den Selektor auf das' '-Tag umzuschalten, um zu sehen, ob es einen Unterschied machen würde, aber ich kann immer noch nicht scheinen, dass es nicht schwarz ist. Ich kann nicht einmal finden, wo das Schwarz im DOM-Inspektor angewendet wird. Irgendwelche anderen Vorschläge? –

ich die genaue Antwort auf Ihre Frage nicht wissen, zu machen, aber diese Informationen helfen können:

I hatte ein ähnliches schwarzes Hintergrundproblem mit enterFullscreen(document.body);. Die Hintergrundfarbe wurde normal, nachdem ich die Zeile in enterFullscreen(document.documentElement); geändert habe. Das CSS, das ich verwendete, ist body{background-color: #D7D7D7; margin: 0px;}.

Quelle

2014-07-13 21:03:53 feilong

Für Informationen, ich habe diese Änderung in reveal.js gemacht und es wurde ein Problem behoben, bei dem Präsentationshintergründe im Vollbildmodus in Chrome schwarz wurden. – Garry

Ich weiß nicht warum Chrome das immer noch mit document.body macht , aber es funktioniert auch für mich mit document.documentElement. Chrome wurde nicht schwarz, wenn Sie F11 (Vollbild über Menü) gedrückt haben, aber nur mit JavaScript document.body wird es schwarz. Auch wenn: Vollbild-Body transparent eingestellt ist. – Robert

Ich weiß nicht warum, aber es scheint, dass der Hintergrund des Körperelements nicht im Vollbild angezeigt wird oder transparent ...

ich dieses Problem behoben, eine Hintergrundfarbe auf das HTML-Element, indem es gut funktionieren:

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

Quelle

2016-05-30 09:57:19 Miaow

Die angenommene Antwort funktioniert, aber das tut dies auch. Würde gerne wissen warum (scheint Webkit spezifisch) ... – Eclectic

die Hauptlösung nicht zu mir arbeiten :-(ich eine andere Lösung gefunden, aber ja, in der CSS:

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

ich verstehe dies für die ist Position meiner Elemente, aber ich bin mir nicht sicher. Hoffe Hilfe für jemanden. Tschüss und danke.

Quelle

2016-08-16 09:57:00 Drako

Hintergrund/Element wird schwarz, wenn sie mit HTML5

Antwort

Verwandte Themen