anzeigen: hintergrund des leeren span -

Sagen wir mal so, ich habe einen span, und ich ein Bild als hintergrund der Spannweite wie diese:

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

Wie Sie oben sehen können, mein span ist leer. Wenn ich einige Inhalte in meine Spannweite wie:

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

Sehe ich das hintergrund Bild von der Spannweite kein problem. Aber Wenn ich die span leer ich sehe nicht das Hintergrundbild. Ich dachte, ich könnte dieses Problem lösen, indem Sie einige Polsterung an meine Spannweite wie:

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

Aber gibt es eine andere Möglichkeit, kann ich dies tun ohne das hinzufügen einiger Polsterung an meine Spanne und meine span leer?

Danke

  • Das element muss einen Breite und Höhe, um für den hintergrund sichtbar sein. Was versuchen Sie zu tun? wird die Spannweite jemals Inhalte?
  • Ein leeres span, werden nicht angezeigt. Fügen Sie eine Polsterung, Breite / Höhe, oder sonst etwas, zum anzeigen einer leeren span...
InformationsquelleAutor user765368 | 2013-05-24
  1. 14

    Erhalten Sie den gleichen Effekt durch die Verwendung von inline-block, aber wenn Sie die Breite und Höhe statt mit Polsterung.

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

    Auch, etwas anderes, das könnte Reise, die Sie bis ist Sie mit doppelten Anführungszeichen in einem HTML-Attribut, das verwirren würde einen parser und kann zu unerwarteten Ergebnissen führen. Ich geändert habe Sie einfache Anführungszeichen in den code, den ich oben gepostet, obwohl keine Zitate wäre genauso gut.

    InformationsquelleAutor Alyssa Ross
  2. 7

    machen Sie nur nicht das es leer ist: setzen Sie ein 'leeres' innen. Es gibt drei Möglichkeiten, das zu tun:

    1. einfach space, und fügen Sie Stil white-space: pre; es

    2. Non-breaking Space &nbsp; oder &#160;

    3. Das non plus ultra ist, lassen Sie css den trick für Sie:

    fügen Sie diese zu Ihrem Stil Spannweite:

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

    Was passiert:

    fügen Sie einen Inhalts vor (oder besser "vorne innen"), Ihre Spannweite, zeigt, dass ein ZERO WIDTH JOINER, und Ihre Spannweite ist nicht leer enymore

    InformationsquelleAutor halfbit
  3. 5

    Standardmäßig Spannweiten sind inline-Elemente der Seite (eher als 'block' - Elemente). Dies bedeutet, dass Sie nicht mehr Platz in der Seite als die, die Ihnen zugewiesen sind—zum Beispiel, wenn Sie text in Ihnen (als Sie Sie gefunden haben). Das zu erreichen, was Sie wollen, müssen Sie ein wenig CSS-Code zu definieren, der eine Höhe und Breite für das span, aber Sie müssen auch machen es zu einem block-element so, dass es gerendert ist konsequent.

    Alternativ könnten Sie wechseln zu etwas, das wie ein div, das ist schon ein block-element. Beachten Sie jedoch, dass die Definition ein block-element bedeutet, dass es wird nehmen Platz auf Ihrer Seite. Wenn Sie möchten etwas mehr Dynamik betrachten einige on-the-fly-manipulation des Elements mit Javascript oder ähnliche.

    (oder so, ignorieren die Ratschläge, die an anderer Stelle auf dieser Seite über single-und double-quotes in HTML-Attributen: das ist völliger Unsinn).

    • Es ist nicht Unsinn überhaupt. Der OP ist mit doppelte Anführungszeichen innerhalb des Wertes ein HTML-Attribut, das dazu führt, dass eine vorzeitige Beendigung des Wert-und ungültiges HTML. Wenn ich <div title="my name is "Bob"!"></div> der Wert für das title-Attribut wird "my name is ". Also die OP ' s style-Attribut, das würde am Ende als "background:url (",, das ist eindeutig falsch.
    • Ganz Recht, my bad. Ich dachte an doppelte / einfache Anführungszeichen in Parametern, Zeitraum (also nicht innerhalb Attribute). Entschuldigung.
    InformationsquelleAutor Ben
  4. 1

    versuchen

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

    Müssen Sie angeben, ein width und height zu zeigen, den hintergrund. Wenn Sie mit der Eingabe, etwas, in das Sie Kraft sowohl mit dem text.

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

    Sollte man width und height.

    In den folgenden SO-Frage ist ein Tipp, wie man die Größe des background-image: Wie bekomme ich background-image size in jQuery

    InformationsquelleAutor Michael Schmidt
Schreibe einen Kommentar