Коротко: вставить изображение в CSS можно через background-image (фон), content: url(...) в псевдоэлементе, mask (форма) или data-URI (картинка «внутри» CSS). Для контентных изображений лучше тег img, а CSS-картинки — для декора и фонов.
alt. Поэтому фоны — для оформления, а смысловые изображения — тегом img.Способы вставки
| Способ | Для чего |
|---|---|
background-image |
фоны, паттерны, иконки-декор |
content: url(...) |
картинка в псевдоэлементе |
mask |
иконка с перекраской |
| data-URI | мелкая картинка без отдельного файла |
тег img |
смысловые изображения |
Вкладки: примеры
.hero {
background-image: url("hero.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.icon {
width: 24px; height: 24px;
background: url("icon.svg") center / contain no-repeat;
}Основной способ. Не забудьте background-size и no-repeat, иначе картинка растянется или размножится.
.link::after {
content: url("arrow.svg");
margin-left: 8px;
}Иконку можно вставить через content. Минус: размер такой картинки сложно контролировать — она вставляется в «натуральном» размере.
.dot {
width: 8px; height: 8px;
background: url("data:image/svg+xml,<svg xmlns='...'><circle r='4'/></svg>") no-repeat;
}Data-URI «встраивает» картинку прямо в CSS: не нужен отдельный запрос. Удобно для мелочей (иконки, точечки), но файл CSS становится больше.
.icon-mask {
width: 24px; height: 24px;
background: #003F8F; /* цвет иконки */
-webkit-mask: url("icon.svg") center / contain no-repeat;
mask: url("icon.svg") center / contain no-repeat;
}Маска позволяет «перекрашивать» внешний SVG-файл: форма задаётся маской, цвет — фоном. Часто используется для иконок из файла.
img с атрибутом alt. Так их найдут поисковики, а скринридеры прочитают описание.Практика: три задачи
- Фон секции —
background-image+cover+center. - Иконка у ссылки — псевдоэлемент с фоном или маской.
- Мелочь «внутри» CSS — data-URI (если файл небольшой).
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Картинка повторяется | нет no-repeat |
добавить |
| Картинка растянута | нет background-size |
задать cover/contain |
| Не видно на светлом фоне | путь неверный | проверить URL относительно CSS |
| Мелкая иконка «мыльная» | PNG вместо SVG | использовать SVG |
Проверьте себя
Вопросы и ответы
Картинка, закодированная прямо в CSS. Убирает отдельный запрос, но увеличивает CSS. Оправдан только для очень мелких изображений.
Напрямую — нет. Используйте mask: форма берётся из SVG, цвет задаётся фоном. Либо вставляйте SVG инлайн, где работает fill: currentColor.
Путь в CSS считается относительно CSS-файла, а не HTML. Проверьте в DevTools, откуда грузится ресурс, и исправьте путь.
background-size: cover — заполняет блок с обрезкой; contain — вписывает целиком. Обычно берут cover.
Итоги
- Фон —
background-image, декор — псевдоэлементы и маски. - Data-URI — только для мелочей.
- Смысловые картинки — тегом
imgсalt. - Пути в CSS считаются относительно CSS-файла.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.