Как изменить 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