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

Вот результаты этой статьи:

• фильтр Свойство
• тень()
• непрозрачность()

Давайте начнем!

Изменить цвет изображения в CSS

Чтобы изменить цвет изображения в CSS, сначала узнайте о свойстве фильтра и его функциях. Таким образом, вы получите лучшее понимание.

фильтровать свойство CSS

Для управления визуальным эффектом изображения используется свойство фильтра CSS. Визуальные эффекты это:

• размытие
• яркость
• регулировка цвета
• тень
• непрозрачность

Синтаксис фильтра Свойство

Синтаксис свойства фильтра:

• размытие(): используется для применения эффекта размытия к изображению.
• падающая тень(): создать тень над изображением.
• непрозрачность(): Используется для добавления прозрачности изображению.

Мы можем использовать несколько фильтров, используя это свойство фильтра. Эта статья о том, как изменить цвет изображения, поэтому здесь мы объясним, как использовать с ним функции drop-shadow() и opacity().

тень()

drop-shadow() — это встроенная функция CSS, которая позволяет установить тень для любого элемента или изображения. Следующие параметры используются в функции drop-shadow() для изменения цвета изображения:

• смещение-х: Используется для добавления горизонтальной тени.
• смещение-y: Тени добавляются вертикально с помощью этого.
• цвет: Тени окрашиваются с помощью этого параметра.

Чтобы прояснить эти моменты, давайте перейдем к синтаксису drop-shadow:

• offset-x и offset-y могут быть положительными или отрицательными.
• По горизонтали положительное значение используется для добавления эффектов на правую сторону, а отрицательное — на левую.
• По вертикали положительное значение соответствует нижней стороне, а отрицательное — верхней.
• Вместо цвета вы можете назначить любой цвет, который хотите придать изображению.

непрозрачность()

opacity() используется для добавления прозрачности элементу или любому изображению. Синтаксис opacity():

Здесь “ количество ” я s используется для установки уровня непрозрачности от 0,0 до 1,0. Чтобы сделать изображение полностью прозрачным, вы можете установить его равным 0.0.0.

Чтобы прояснить вышеупомянутые моменты, давайте перейдем к примеру.

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

В приведенном ниже примере сначала мы добавим изображение с помощью тега :

До применения свойства фильтра результат был таким:

Чтобы изменить цвет изображения, давайте перейдем к CSS и применим к нему свойство фильтра. Мы установим непрозрачность на 0,5 для прозрачности изображения. В функции drop-shadow() значение offset-x и offset-y равно 0, потому что мы хотим изменить только цвет изображения.

Вот конечный результат после внедрения:

Цвет изображения был успешно изменен.

Вывод

Для изменения цвета изображения используются две функции CSS: opacity() и drop-shadow() со свойством filter. opacity() указывает прозрачность изображения, а drop-shadow() назначает цвет и тень изображению. В этой статье объясняется метод изменения цвета изображения с помощью CSS.