CSS hintergrund Bild ohne text?

Habe ich eine einfache info-Symbol, und ich will zeigen Sie Sie als css-hintergrund-Bild. Dies ist, was ich versucht habe:

span.info {
    background-image: url(info.png);
    float: right;
    width: 17px;
    display: block;
}

Dies ist, wie ich es verwenden: 

<span class="info"></span>

Diese nicht das Bild angezeigt. Ich habe einen text, wie diesen:

<span class="info">test</span>

Dieser zeigt das Bild mit text, aber ich will es ohne text, nur das Bild. Was mache ich falsch?

Dank!

  • Völlig irrelevant für deine Frage, aber wie hast du float:right gibt, die Sie nicht brauchen display:block. Gefloateten Elemente werden automatisch so behandelt, als block-level-Elemente sind, auch wenn Sie display:inline zu Ihnen.
InformationsquelleAutor user1540714 | 2012-08-06
  1. 7

    Musst du eine Höhe in Ihrem Stil.

    span.info {
    background-image: url(info.png);
    float: right;
    width: 17px;
    height: 17px;
    display: block;
}
    • Ok, gut, das zeigt immer das Bild. Das Bild ist größer als die der 17px, gibt es einen Weg, um es zu skalieren?
    • wenn das Bild größer ist als 17px, legen Sie die Höhe der <span> um die Höhe des Bildes.
    • Ich verwendete background-size: 17px, die arbeiten, zu
    InformationsquelleAutor DanielB
  2. 2

    Sogar mit display:block (welche obligatorisch ist) müssen Sie die Höhe des span.

    InformationsquelleAutor darma
  3. 2

    Wenn Sie möchten, dass das Bild nur, warum spielst du nicht <img> direkt. Es wird Ihnen mehr Kontrolle über das Bild.

    Aber Sie können das Hintergrundbild der messspanne wie folgt vor.

    <span> ist kein block-element wie <div>. So haben Sie, um Ihre "display: block". Dann geben Sie einige Höhe und Breite für die span.

    InformationsquelleAutor Narendra
  4. 1

    Ohne Inhalt der span wird nicht alles zeigen, es sei denn Sie spezifizieren eine Höhe und Breite) in die CSS...

    span.info {
    height: 17px;
    ...
}
    InformationsquelleAutor freefaller
  5. 0

    sollte dies funktionieren:

    <span class="info">&nbsp;</span>

    InformationsquelleAutor orhanhenrik
Schreibe einen Kommentar