PassFront
  1. PassFront
  2. База знаний
  3. Основы CSS

Как изменить background у изображения в CSS?

Основы CSS

Если изображение задано как фон, его меняют свойствами `background`; если это <img>, «фон» за картинкой видно только у прозрачных участков.

Фоновая картинка

.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  background-color: #222; /* пока картинка грузится */
}
  • Поменять картинку — новое значение background-image (например, при :hover или в медиазапросе).
  • Наложить цвет или градиент поверх — несколько слоёв:
.hero {
  background:
    linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / .5)),
    url('hero.jpg') center / cover;
}

У тега img

  • background-color у <img> виден за прозрачными частями PNG/SVG.
  • Изменить вид самой картинки — через filter (grayscale(), brightness()) или наложение псевдоэлементом у обёртки.

Коротко для собеседования

Фон меняют через background-image, background-size, background-position и многослойные фоны с градиентом; у <img> — через filter или обёртку.

Подробнее: MDN — background

Другие вопросы раздела