Ich habe ein Problem mit einem Hintergrundbild, das nicht angezeigt wird.
Ich habe eine Klasse, die ich einem Anker-Tag hinzugefügt habe.
%Vor%und das CSS für die Klasse ist:
%Vor%Das Problem ist, dass das Hintergrundbild nicht angezeigt wird.
Ich weiß, dass es da ist, wenn ich das tue:
%Vor%Teil des Bildes zeigt.
Hat jemand eine Idee, wie man das ganze Bild zeigen kann, ohne viele 's bitte einfügen zu müssen?
<a> tag ist ein inline Element und ohne Inhalt wird der Hintergrund nicht angezeigt. Sie müssen display als block oder inline-block Element definieren und dann definieren die Größe des Elements.
Versuchen Sie es mit:
%Vor%Weitere Informationen erhalten Sie im Box-Modell und im Anzeigen der Eigenschaft auf dem CSS 2.1 w3c Standard .
Auch die Abschnitte Die width-Eigenschaft und Berechnung von Breiten und Rändern haben eine Erklärung, warum das Element den Hintergrund eines leeren Inline-Elements nicht zeigt.
>Aktualisierung:
Auch der Arbeitsentwurf des CSS Box-Modells ist verfügbar auf der W3C-Site.
Update 2:
Als Nebenbemerkung kann der Zugriff auf ein css-Hintergrundbild für einen Link Probleme mit der Barrierefreiheit haben.
Das Element hat eine Breite von Null, weil es überhaupt keinen Inhalt hat. Wenn das Bild nützliche Informationen enthält (und das sollte es wirklich, wird es als Link verwendet!), Sollten Sie etwas Text in den Link einfügen und eine beliebige Bildwiederherstellungstechnik verwenden, zum Beispiel:
HTML:
%Vor%CSS:
%Vor%Sie müssen Ihrem Anker eine Breite zuweisen. Inline-Elemente haben keine Breite, wenn sie keinen Inhalt haben.
%Vor% Bearbeiten: und es scheint, dass es ohne Inhalt überhaupt noch eine Höhe und display:inline-block geben muss. Dies bewirkt, dass das Element intern als Blockelement betrachtet wird, aber extern als Inline fungiert.