Dodaj obraz po lewej stronie tekstu za pomocą css

85

Jak mogę dodać obraz do tekstu za pomocą css?

Mam to:

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

i chcę dodać obraz 16x16 po lewej stronie, używając css. Czy to możliwe, czy powinienem po prostu ręcznie dodać ten obraz w następujący sposób:

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

Wolałbym nie musieć ręcznie zmieniać wszystkich miejsc, dlatego chciałem to zrobić przez css.

dzięki!

css

— Chris Conway
źródło

126

.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 */
}

Baw się z dopełnieniem i ewentualnie marginesem, aż uzyskasz pożądany efekt. Możesz także pobawić się pozycją obrazu tła (* ukłon w stronę Toma Wrighta) z „pozycją tła” lub całkowicie zdefiniować „tło” ( link do w3 ).

— Jon Smock
źródło

Może chcesz określić położenie obrazu. Ale poza tym dobry telefon.

— Tom Wright,

1

Prawdopodobnie możesz uniknąć ustawiania właściwości display na block, jeśli upewnisz się, że wysokość linii jest wystarczająco duża, aby dopasować obraz w pionie, w przeciwnym razie [prawdopodobnie] zobaczysz, że zostanie ucięty i będziesz chciał zrobić z niego element blokowy.

— Zack The Human

Możesz użyć zoptymalizowanej opcji zamiast dwóch pierwszych wierszy: background: url ('somewhere.jpg') no-repeat;

— Alexis Gamarra

1

Działa to, gdy strona jest wyświetlana na ekranie, ale większość przeglądarek domyślnie pomija obrazy tła podczas drukowania, tak że w miejscu, w którym powinien znajdować się obraz, pozostaje puste miejsce. Musi być na to jakiś sposób!

— Vivian River

36

Bardzo prosta metoda:

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

Działa we wszystkich nowoczesnych przeglądarkach i IE8 +.

Edytować

Nie używaj tego jednak w dużych witrynach. Pseudo-element: before jest okropny pod względem wydajności.

— tomasz86
źródło

12

Spróbuj czegoś takiego:

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

}

— Traingamer
źródło

ale nie zapomnij o braku powtórzeń

— Traingamer

1

Dodanie width:2em; background-size: contain;może być również przydatne w celu ograniczenia rozmiaru obrazu.

— Damian Green

8

To działa świetnie

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

— Шууданч Зөгий
źródło

1

możesz to jednak rozwinąć, dlaczego to działa. dlaczego jego kod nie

— działa

1

Czy powinno być coś w środku url()?

— Darren Cook,

@Darren Cook - Nie wiem, czy jesteś sarkastyczny, czy nie, w każdym razie musisz tam umieścić adres URL swojego obrazu.

— Giovanni

3

@Giovanni Nie sarkazm! Po prostu zredagowałem odpowiedź, aby było jaśniejsze, że nie została celowo pozostawiona pusta.

— Darren Cook,

3

Do dodawania ikony tła zawsze przed tekstem, gdy długość tekstu nie jest znana z góry.

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

— Toki
źródło