zeigen Hintergrund der leeren Spannweite

Question

Lassen Sie uns sagen, dass ich eine Spannweite haben und ich setzen ein Bild als Hintergrund der Spanne wie folgt aus:

<span style="background:url("my_image.png") no-repeat;"></span> 

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

<span style="background:url("my_image.png") no-repeat;">Some content...</span> 

Ich kann das Hintergrundbild der Spannweite ohne Probleme sehen. Aber wenn ich den Bereich leer lasse, sehe ich das Hintergrundbild nicht. Ich dachte, dass ich durch das Hinzufügen einiger Polsterung meiner Spanne wie dieses Problem lösen könnte:

<span style="background:url("my_image.png") no-repeat;padding:20px;"></span> 

Aber gibt es eine andere Art, wie ich dies ohne etwas Padding Hinzufügen meiner Spanne tun und halten meine Spanne leer?

Danke

Answer 1

Sie den gleichen Effekt durch Inline-Block verwenden, aber die Breite und Höhe einstellen anstatt mit Polsterung.

<span style="background:url('my_image.png') no-repeat; display: inline-block; width: 40px; height: 40px;"></span> 

auch etwas anderes, das Sie nach oben auslösen könnte, ist man innerhalb eines HTML-Attribut doppelte Anführungszeichen verwenden, die einen Parser verwirren würde 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.

Answer 2

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

<span style="background:url("my_image.png") no-repeat; width: 50px; height: 25px"></span> 

Answer 3

standardmäßig Spannweiten sind Inline-Seitenelemente (statt '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önnten Sie zu etwas wie einem div, das bereits ein Blockelement ist, wechseln. Beachten Sie jedoch, dass das Definieren eines Blockelements bedeutet, dass Platz auf Ihrer Seite einnehmen. Wenn Sie etwas Dynamischeres wollen, sollten Sie eine spontane Manipulation des Elements mit Javascript o.ä. in Betracht ziehen.

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

Answer 4

versuchen

<span style="background:url('my_image.png') no-repeat; display:block; height: 40px;"></span> 

Answer 5

Sie ein width und height setzen soll.
Im folgenden SO-Frage ist ein Tipp, wie man die Größe des Hintergrundbildes zu erhalten: How do I get background-image size in jQuery

Answer 6

es einfach nicht leer machen: inside a ‚leer‘ gesetzt.Es gibt drei Möglichkeiten, das zu tun:

1. einfach space und Stil hinzufügen white-space: pre; es

2. Non-breaking Space  oder  

3. Das Nonplusultra ist, zu lassen CSS den Trick für Sie:

fügen Sie diesen Stil Ihrer Spannweite hinzu:

:before { 
    content: "\200D"; 
    display:inline; 
} 

Was geschieht:

Sie einen Inhalt hinzufügen, bevor (oder besser „vor innen“) Ihre Spanne, die ein ZERO WIDTH JOINER zeigt, und Ihre Spanne ist nicht leer enymore