Вот результаты этой статьи:
Давайте начнем!
Изменить цвет изображения в CSS
Чтобы изменить цвет изображения в CSS, сначала узнайте о свойстве фильтра и его функциях. Таким образом, вы получите лучшее понимание.
фильтровать свойство CSS
Для управления визуальным эффектом изображения используется свойство фильтра CSS. Визуальные эффекты это:
- размытие
- яркость
- регулировка цвета
- тень
- непрозрачность
Синтаксис фильтра Свойство
Синтаксис свойства фильтра:
фильтр : размытие ( ) | тень ( ) | непрозрачность ( )- размытие(): используется для применения эффекта размытия к изображению.
- падающая тень(): создать тень над изображением.
- непрозрачность(): Используется для добавления прозрачности изображению.
Мы можем использовать несколько фильтров, используя это свойство фильтра. Эта статья о том, как изменить цвет изображения, поэтому здесь мы объясним, как использовать с ним функции drop-shadow() и opacity().
тень()
drop-shadow() — это встроенная функция CSS, которая позволяет установить тень для любого элемента или изображения. Следующие параметры используются в функции drop-shadow() для изменения цвета изображения:
- смещение-х: Используется для добавления горизонтальной тени.
- смещение-y: Тени добавляются вертикально с помощью этого.
- цвет: Тени окрашиваются с помощью этого параметра.
Чтобы прояснить эти моменты, давайте перейдем к синтаксису drop-shadow:
тень ( смещение-x смещение-y цвет )- offset-x и offset-y могут быть положительными или отрицательными.
- По горизонтали положительное значение используется для добавления эффектов на правую сторону, а отрицательное — на левую.
- По вертикали положительное значение соответствует нижней стороне, а отрицательное — верхней.
- Вместо цвета вы можете назначить любой цвет, который хотите придать изображению.
непрозрачность()
opacity() используется для добавления прозрачности элементу или любому изображению. Синтаксис opacity():
непрозрачность ( количество ) ;Здесь “ количество ” я s используется для установки уровня непрозрачности от 0,0 до 1,0. Чтобы сделать изображение полностью прозрачным, вы можете установить его равным 0.0.0.
Чтобы прояснить вышеупомянутые моменты, давайте перейдем к примеру.
Как изменить цвет изображения в CSS?
В приведенном ниже примере сначала мы добавим изображение с помощью тега :
< тело >< изображение учебный класс знак равно 'изображение' источник знак равно 'изображение.jpg' все знак равно '' >
< / тело >
До применения свойства фильтра результат был таким:
Чтобы изменить цвет изображения, давайте перейдем к CSS и применим к нему свойство фильтра. Мы установим непрозрачность на 0,5 для прозрачности изображения. В функции drop-shadow() значение offset-x и offset-y равно 0, потому что мы хотим изменить только цвет изображения.
.изображение {фильтр : непрозрачность ( 0,5 ) тень ( 0 0 коричневый ) ;
}
Вот конечный результат после внедрения:
Цвет изображения был успешно изменен.
Вывод
Для изменения цвета изображения используются две функции CSS: opacity() и drop-shadow() со свойством filter. opacity() указывает прозрачность изображения, а drop-shadow() назначает цвет и тень изображению. В этой статье объясняется метод изменения цвета изображения с помощью CSS.