Fügen Sie Bild von der linken Seite des Textes über css

hinzu Wie kann ich ein Bild zu etwas Text über CSS hinzufügen?Fügen Sie Bild von der linken Seite des Textes über css

Ich habe das bekam:

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

und ich möchte ein 16x16 Bild auf der linken Seite, dass durch mit CSS hinzuzufügen. Ist das möglich oder soll ich nur hinzufügen, manuell um dieses Bild in etwa so:

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

Ich würde lieber nicht manuell alle Orte zu ändern, weshalb ich es per CSS tun wollte.

danke!

Quelle

2009-04-09 Chris Conway

109

Spielen Sie mit Polsterung und möglicherweise Marge, bis Sie das gewünschte Ergebnis erhalten. Sie können auch mit der Position des Hintergrundbilds (* nick to Tom Wright) mit "background-position" oder einer vollständigen Definition von "background" (link to w3) spielen.

Quelle

2009-04-09 18:33:53

möglicherweise die Position des Bildes angeben möchten. Aber ansonsten, guten Ruf. –

Sie können es wahrscheinlich vermeiden, die display -Eigenschaft auf Blockieren zu setzen, wenn Sie sicherstellen, dass die Zeilenhöhe groß genug ist, um das Bild vertikal anzupassen, sonst sehen Sie [möglicherweise], dass es abgehackt wird und es zu einem Blockelement machen möchte. –

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

Versuchen Sie so etwas wie:

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

}

Quelle

2009-04-09 18:38:49 Traingamer

Immer noch sehr hilfreich :-) –

aber vergessen Sie nicht die * no-repeat * – Traingamer

Sehr einfache Methode:

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

Arbeiten in allen modernen Browsern und IE8 +.

bearbeiten

Sie dies obwohl bei großen Websites nicht nutzen. Das: vor dem Pseudo-Element ist in Bezug auf die Leistung schrecklich.

Quelle

2013-08-16 19:18:39 tomasz86

Dies funktioniert gut

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

Quelle

2014-07-15 05:19:48

können Sie dies jedoch, warum es funktioniert. warum sein Code nicht usw. – Yaje

Sollte da etwas in der 'url()' sein? –

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

Fügen Sie Bild von der linken Seite des Textes über css

Antwort

Verwandte Themen