Добавить изображение слева от текста через CSS

85

Как я могу добавить изображение к тексту через CSS?

У меня есть это:

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

и я хочу добавить изображение 16x16 слева от него с помощью css. Возможно ли это, или я должен просто вручную добавить это изображение вот так:

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

Я бы предпочел не менять все места вручную, поэтому я хотел сделать это через css.

благодаря!

css

— Крис Конвей
источник

127

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

Поиграйте с отступом и, возможно, маржей, пока не получите желаемый результат. Вы также можете поиграть с положением фонового изображения (* кивок Тому Райту) с помощью «background-position» или полностью определив «background» ( ссылка на w3 ).

— Джон Смок
источник

Возможно, вы захотите указать положение изображения. Но в остальном хороший звонок.

— Том Райт,

1

Вы, вероятно, можете избежать установки свойства display на блокировку, если убедитесь, что line-height достаточно велика, чтобы соответствовать изображению по вертикали, иначе вы [возможно] увидите, что оно отрублено, и захотите превратить его в элемент блока.

— Zack The Human

Вы можете использовать оптимизированный вариант вместо двух первых строк: background: url ('where.jpg ') no-repeat;

— Alexis Gamarra

1

Это работает, когда страница отображается на экране, но большинство браузеров по умолчанию пропускают фоновые изображения при печати, так что на месте предполагаемого изображения останется пустое пространство. Для этого должен быть обходной путь!

— Vivian River

36

Очень простой способ:

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

Работает во всех современных браузерах и IE8 +.

редактировать

Однако не используйте это на больших сайтах. Псевдоэлемент: before ужасен с точки зрения производительности.

— томаш86
источник

12

Попробуйте что-нибудь вроде:

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

}

— Трайнгамер
источник

но не забывайте о

— запрете

1

Добавление также width:2em; background-size: contain;может быть полезно для ограничения размера изображения.

— Дамиан Грин

8

Это отлично работает

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

— Шууданч Зөгий
источник

1

вы можете уточнить, почему это работает. почему его код не работает и т. д.

— Yaje

1

Должно быть что-то в url()?

— Даррен Кук

@Darren Cook - Не знаю, саркастичен вы или нет, в любом случае вам нужно указать URL-адрес вашего изображения.

— Джованни,

3

@Giovanni Не сарказм! Я просто отредактировал ответ, чтобы было понятнее, что он не был оставлен пустым намеренно.

— Даррен Кук,

2

Для добавления фонового значка всегда перед текстом, когда длина текста заранее не известна.

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

— Toki
источник