Hintergrund der leeren Spanne anzeigen

8

Nehmen wir an, dass ich eine Spanne habe und ein Bild als Hintergrund der Spanne wie folgt einstelle:

%Vor%

Wie Sie oben sehen können, ist meine Spannweite leer. Wenn ich etwas Inhalt in meinen Bereich wie:

%Vor%

Ich kann das Hintergrundbild der Spannweite ohne Probleme sehen. Aber wenn ich den Bereich leer lasse, sehe ich das Hintergrundbild nicht. Ich dachte mir, dass ich dieses Problem lösen könnte, indem ich meinem Bereich etwas Auffüllen hinzufügte wie:

%Vor%

Aber gibt es noch eine andere Möglichkeit, dies zu tun, ohne meinem Bereich etwas Auffüllen hinzuzufügen und meinen Bereich leer zu halten?

Danke

    
user765368 24.05.2013, 21:48
quelle

6 Antworten

11

Sie erhalten den gleichen Effekt, wenn Sie Inline-Block verwenden, aber Breite und Höhe einstellen, anstatt Padding zu verwenden.

%Vor%

Auch etwas anderes, das Sie stolpern könnte, ist, dass Sie in einem HTML-Attribut doppelte Anführungszeichen verwenden, was einen Parser verwirren und zu unerwarteten Ergebnissen führen könnte. Ich habe sie in den Code, den ich oben gepostet habe, in einfache Anführungszeichen geändert, obwohl keine Anführungszeichen genauso gut funktionieren würden.

    
Alyssa Ross 24.05.2013 22:02
quelle
4

Standardmäßig sind Spannen Inline-Seitenelemente (anstatt "Block" -Elemente). Dies bedeutet, dass sie auf der Seite nicht mehr Platz benötigen als ihnen zugewiesen werden, z. B. wenn Sie Text in sie einfügen (wie Sie gefunden haben). Um das zu erreichen, was Sie wollen, benötigen Sie ein kleines CSS, um eine Höhe und Breite für den Bereich zu definieren, aber Sie müssen es auch zu einem Blockelement machen, damit es konsistent gerendert wird.

Alternativ können Sie auch zu einem div wechseln, das bereits ein Blockelement ist. Beachten Sie jedoch, dass das Definieren eines Blockelements bedeutet, dass es Speicherplatz auf Ihrer Seite belegt. Wenn Sie etwas dynamischeres wollen, sollten Sie eine spontane Manipulation des Elements mit Javascript oder ähnlichem in Betracht ziehen.

(Wie auch immer, ignorieren Sie den Hinweis an anderer Stelle auf dieser Seite über einfache und doppelte Anführungszeichen in HTML-Attributen: das ist völliger Unsinn).

    
Ben 24.05.2013 22:07
quelle
2

mach es einfach nicht leer: Lege ein "leeres" hinein. Dafür gibt es drei Möglichkeiten:

  1. simple space und fügen Sie ihm den Stil white-space: pre; hinzu

  2. Nicht brechender Speicherplatz   oder  

  3. Das Nonplus Ultra ist, um css den Trick für Sie zu machen:

Fügen Sie diesen Stil zu Ihrem Bereich hinzu:

%Vor%

Was passiert:

Sie fügen einen Inhalt vor (oder besser "vor drinnen") Ihrer Spanne hinzu, der eine ZERO WIDTH JOINER , und deine Spanne ist nicht leer enymore

    
halfbit 16.03.2016 18:57
quelle
0

Sie müssen einen width und height angeben, um den Hintergrund anzuzeigen. Wenn Sie etwas eingeben, erzwingen Sie beide mit dem Text.

%Vor%     
supersize 24.05.2013 22:03
quelle
0

probiere

aus %Vor%     
ShibinRagh 30.05.2013 08:30
quelle
0

Sie sollten width und height einstellen.
In der folgenden SO-Frage ist ein Tipp, wie man die Größe des Hintergrundbildes erhält: Wie bekomme ich die Hintergrundbildgröße in jQuery

?     
Michael Schmidt 30.05.2013 08:37
quelle

Tags und Links