CSS - Zusätzliches Hintergrundbild für wenn das erste Bild nicht geladen wird?

8

Okay, nehmen wir an, Sie haben so etwas:

%Vor%

Jedes CSS-Tutorial, das ich je gelesen habe, hat das Konzept der Verwendung einer Hintergrundfarbe nach dem Hintergrundbild-Code behandelt, der natürlich das Bild ersetzt, wenn ein Bild nicht verfügbar ist, aber ...

Wie geben Sie ein Backup-Hintergrundbild an - eines, das angezeigt werden soll, wenn das referenzierte Bild nicht verfügbar ist? Wenn es keinen CSS-Trick dafür gibt, könnte JavaScript vielleicht damit umgehen?

    
tylerl 19.10.2011, 05:33
quelle

4 Antworten

6

Einfache Antwort:

Sie könnten die Spanne entweder innerhalb einer anderen Spanne verschachteln - mit der äußeren Spanne, die für die Verwendung des Backup-Hintergrundbilds festgelegt wurde. Wenn der Hintergrund der Innenspannweite nicht verfügbar ist, sehen Sie die Außenseiten

Bessere, schwierigere Antwort:

Sie könnten ein ähnliches Ergebnis in reinem CSS erzielen, indem Sie vor dem Bereich einen Pseudo-Inhalt hinzufügen und dann den Fallback-Hintergrund formatieren. Dies erfordert jedoch normalerweise einige Versuche und Fehler, um es richtig zu machen;

Etwas lile

%Vor%     
Matt Tew 19.10.2011, 05:41
quelle
17

In modernen Browsern können Sie Hintergrundbilder verketten und mehr als eines auf jedem Knoten haben. Sie können Hintergrund-Position und Hintergrund-Wiederholung sogar ketten! Das bedeutet, dass Sie Ihr erstes Bild (das ist der Fallback) deklarieren können und dann das zweite Bild darüber angezeigt wird, falls es existiert.

%Vor%

JFIDDLE DEMO

    
sidonaldson 19.12.2013 14:49
quelle
1

Erklären Sie einfach das bevorzugte Standardbild nach Ihrer Hintergrunderklärung:

%Vor%

idk die Dimensionen Ihres img, so sind sie "xxpx" Arbeitsdemo: Ссылка

    
albert 19.10.2011 08:05
quelle
0

Nun, ich weiß, dass das aktuelle Tag onload-, onerror- und onabort-Ereignisse hat. Sie könnten versuchen, es in ein Bild zu laden, und wenn das gelingt, verwenden Sie JS, um die Hintergrundeigenschaft des Bodys festzulegen.

EDIT: Macht nichts. Ich mag seine Antwort besser.

    
BinderNews 19.10.2011 05:41
quelle

Tags und Links