Fügen Sie das Bild links vom Text über CSS hinzu

81

Wie kann ich einem Text über CSS ein Bild hinzufügen?

Ich habe das:

<span class="create">Create something</span>

und ich möchte ein 16x16-Bild links davon mithilfe von CSS hinzufügen. Ist das möglich oder sollte ich dieses Bild einfach so manuell hinzufügen:

<span class="create"><img src="somewhere"/>Create something</span>

Ich möchte lieber nicht alle Orte manuell ändern, weshalb ich dies über CSS tun wollte.

Vielen Dank!

css

— Chris Conway
quelle

124

.create
{
background-image: url('somewhere.jpg');
background-repeat: no-repeat;
padding-left: 30px;  /* width of the image plus a little extra padding */
display: block;  /* may not need this, but I've found I do */
}

Spielen Sie mit Polsterung und möglicherweise Rand, bis Sie das gewünschte Ergebnis erzielen. Sie können auch mit der Position des Hintergrundbilds (* nicken an Tom Wright) mit "Hintergrundposition" spielen oder eine vollständige Definition von "Hintergrund" vornehmen ( Link zu w3 ).

— Jon Smock
quelle

Möglicherweise möchten Sie die Position des Bildes angeben. Aber sonst guter Anruf.

— Tom Wright

1

Sie können wahrscheinlich vermeiden, die Anzeigeeigenschaft auf Blockieren zu setzen, wenn Sie sicherstellen, dass die Linienhöhe groß genug ist, um vertikal zum Bild zu passen. Andernfalls wird es [möglicherweise] abgeschnitten und Sie möchten es zu einem Blockelement machen.

— Zack der Mensch

Sie können die optimierte Option anstelle der beiden ersten Zeilen verwenden: background: url ('irgendwo.jpg') no-repeat;

— Alexis Gamarra

1

Dies funktioniert, wenn die Seite auf dem Bildschirm angezeigt wird. In den meisten Browsern werden beim Drucken jedoch standardmäßig Hintergrundbilder weggelassen, sodass an der Stelle, an der sich das Bild befinden soll, ein Leerzeichen verbleibt. Dafür muss es eine Umgehung geben!

— Vivian River

36

Sehr einfache Methode:

.create:before {
content: url(image.png);
}

Funktioniert in allen modernen Browsern und IE8 +.

Bearbeiten

Verwenden Sie dies jedoch nicht auf großen Websites. Das: vor Pseudo-Element ist in Bezug auf die Leistung schrecklich.

— tomasz86
quelle

11

Versuchen Sie etwas wie:

.create
 { 
  margin: 0px;
  padding-left: 20px;
  background-image: url('yourpic.gif');
    background-repeat: no-repeat;

}

— Traingamer
quelle

aber vergessen Sie nicht die No-Repeat

— Traingamer

Das Hinzufügen width:2em; background-size: contain;kann ebenfalls nützlich sein, um die Größe des Bildes zu begrenzen.

— Damian Green

8

Das funktioniert super

.create:before{
    content: "";
    display: block;
    background: url('somewhere.jpg') no-repeat;
    width: 25px;
    height: 25px;
    float: left;
}

— Шууданч Зөгий
quelle

1

Sie können dies jedoch näher erläutern, warum es funktioniert. warum sein Code nicht usw.

— Yaje

1

Sollte da etwas drin sein url()?

— Darren Cook

@Darren Cook - Weiß nicht, ob du sarkastisch bist oder nicht, trotzdem musst du die URL zu deinem Bild hinzufügen.

— Giovanni

3

@ Giovanni Kein Sarkasmus! Ich habe die Antwort nur bearbeitet, um klarer zu machen, dass sie nicht absichtlich leer gelassen wurde.

— Darren Cook

1

Zum Hinzufügen eines Hintergrundsymbols immer vor dem Text, wenn die Textlänge nicht im Voraus bekannt ist.

.create:before{
content: "";
display: inline-block;
background: #ccc url(arrow.png) no-repeat;
width: 10px;background-size: contain;
height: 10px;
}

— Toki
quelle