Как менять цвет картинки CSS

Вы можете менять цвет картинки в CSS с помощью свойства filter. В частности, с помощью значения hue-rotate() вы можете изменять цвет картинки.

Вот пример:

<img src="your-image.jpg" alt="your image" class="my-image">
.my-image {
  filter: hue-rotate(150deg);
}

Здесь мы используем свойство filter, чтобы применить эффект hue-rotate к картинке. Значение в скобках задает угол поворота оттенка цвета картинки, измеряемый в градусах.

Значение 0deg означает оригинальный цвет картинки, а значения от 1deg до 359deg — изменение цвета в зависимости от угла поворота. Например, значение 150deg изменит оригинальный цвет картинки на зеленовато-голубой тон.

Вы также можете использовать другие значения свойства filter, такие как brightness()contrast()blur()grayscale()sepia()saturate(), чтобы настроить другие эффекты на ваше усмотрение.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как менять цвет картинки CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали