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


83

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

У мене це:

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

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

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

Я волів би не мусити вручну міняти всі місця, саме тому я хотів це зробити через 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 жахливий з точки зору продуктивності.


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;
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.