Wie wird der Farbverlauf geladen, während das Hintergrundbild aufgrund einer langsamen Internetverbindung geladen wird?

Ich versuche, Farbverlauf zu laden, während mein Hintergrundbild lädt, aber es wird angezeigt, selbst wenn Bild geladen wird. Wie kann ich mein CSS schreiben, so dass der Farbverlauf nicht angezeigt wird, wenn das Bild geladen ist? Bitte schauen Sie den Code Probe ich versucht habe:Wie wird der Farbverlauf geladen, während das Hintergrundbild aufgrund einer langsamen Internetverbindung geladen wird?

background: url("../images/contactBg.jpg"), linear-gradient(rgba(3, 34, 47, 0.8), #01010e);

Quelle

2016-04-08 Akash Jain

Es scheint, dass Ihr Ansatz sollte nur bei den meisten Browsern (IE9 +) funktionieren? – tsh

Wenn Sie eine andere HTML-Markup hinzugefügt nichts ausmacht, können Sie die div mit Hintergrundbild in einem div mit Hintergrundgradienten wickeln kann.

Quelle

2016-04-15 09:51:34

Das Bild lädt ist PNG so nach dem Laden des Bildes Farbverlauf sollte nicht sichtbar sein und die Art, wie Sie vorgeschlagen Gradienten beibehalten, wie es hinter dem Bild ist –

@AkashJain Ich sehe, ich denke, dass Sie das mit CSS allein nicht tun können. Versuchen Sie vielleicht, jquery '.load()' zu verwenden, um das Bild zu laden und dann die Klasse des div zu ersetzen, wenn die Anfrage abgeschlossen ist. –

Ich denke (oder zumindest weiß) von keiner Möglichkeit, dies nur in CSS zu tun.

Eine Abhilfe zu verwenden ist, um die JQuery load function (nicht getestet):

$('#mydiv').load('../images/contactBg.jpg', function() { 
    //image has loaded, remove the background and add the image 
    $('#mydiv').css("background", "none"); 
    $('#mydiv').css('background-image', 'url(../images/contactBg.jpg)'); 
});

Auf diese Weise setzen die CSS von #mydiv zu background: linear-gradient(rgba(3, 34, 47, 0.8), und, wenn das Bild geladen wird, wird dies den Gradienten entfernen und ersetzen mit dem Bild.

Quelle

2016-04-15 10:25:33

hat nicht funktioniert !!! –

@Mazino S Ukah - Es funktioniert, siehe Arbeit Geige: https://jsfiddle.net/k77dsyc2/1/ FYI, die Angabe, ich habe den Code nicht getestet bedeutet, dass dies eine Richtlinie war, um das Problem zu lösen, nicht die genaue Lösung. –

okay, cool, danke –

Wie wird der Farbverlauf geladen, während das Hintergrundbild aufgrund einer langsamen Internetverbindung geladen wird?

Antwort

Verwandte Themen