Додайте зображення ліворуч від тексту через css

83

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

У мене це:

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

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

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

Я волів би не мусити вручну міняти всі місця, саме тому я хотів це зробити через css.

Дякую!

css

— Кріс Конвей
джерело

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

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

— Джон Смок
джерело

Можливо, хочеться вказати позицію зображення. Але в іншому випадку, хороший дзвінок.

— Том Райт,

1

Можливо, ви можете уникнути встановлення властивості display для блокування, якщо переконаєтесь, що висота рядка є достатньо великою, щоб розмістити зображення по вертикалі, інакше ви [можливо] побачите, як воно відрубається і захочете зробити його елементом блоку.

— Zack The Human,

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

— Alexis Gamarra,

1

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

— річка Вівіан

36

Дуже простий метод:

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

Працює у всіх сучасних браузерах та IE8 +.

Редагувати

Не використовуйте це на великих сайтах. Псевдоелемент: before жахливий з точки зору продуктивності.

— tomasz86
джерело

12

Спробуйте щось на зразок:

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

}

— Трінгамер
джерело

але не забувайте не повторюватись

— Traingamer

1

Додавання також width:2em; background-size: contain;може бути корисним для того, щоб обмежити розмір зображення.

— Damian Green

8

Це чудово працює

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

— Шууданч Зөгий
джерело

1

Ви можете це детально розробити, чому це працює. чому його код не зробив тощо

— Ядже

1

Чи має бути щось у url()?

— Даррен Кук,

@ Даррен Кук - Не знаєш, є ти саркастичним чи ні, у будь-якому випадку ти повинен розмістити там URL-адресу свого зображення.

— Джованні

3

@Giovanni Не сарказм! Я просто відредагував відповідь, щоб було зрозуміліше, що вона не була залишена порожньою навмисно.

— Даррен Кук,

2

Для додавання піктограми фону завжди перед текстом, якщо довжина тексту не відома заздалегідь.

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

— Токі
джерело