- Функции фильтров
- Пример
- Как пишется
- blur ( )
- brightness ( )
- contrast ( )
- drop — shadow ( )
- grayscale ( )
- hue — rotate ( )
- invert ( )
- opacity ( )
- saturate ( )
- sepia ( )
- Все фильтры сразу
- Подсказки
- На практике
- Елена Соколовская советует
- Как изменить цвет PNG изображения с помощью CSS
- 1. Создайте HTML.
- 2. Добавьте CSS.
- Пример
- Пример
- Как изменить цвет изображения html
- Learn Latest Tutorials
- Preparation
- Trending Technologies
- B.Tech / MCA
- Javatpoint Services
- Training For College Campus
Функции фильтров
CSS позволяет накладывать поверх картинок или фонов различные фильтры. Почти как в Инстаграме. Можно, например, размыть или обесцветить изображение, сделать его более контрастным.
Функции используются в качестве значений для свойств filter и backdrop — filter .
Пример
Скопировать ссылку «Пример» Скопировано
div filter: saturate(2.2);>div filter: saturate(2.2); >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
blur ( )
Скопировать ссылку «blur()» Скопировано
Примеряет размытие Гаусса к изображению. Значение в скобках указывает сколько пикселей сливаются друг с другом. Чем больше значение, тем больше размытие. Можно указать положительное значение в любых единицах измерения, кроме процентов.
img filter: blur(3px);>img filter: blur(3px); >
brightness ( )
Скопировать ссылку «brightness()» Скопировано
Меняет яркость изображения. В скобках можно указать любое значение от 0% и выше. Значение 0% сделает изображение полностью чёрным. Значение 100% вернёт изображению исходную яркость. Значение больше 100% выкрутит яркость картинки. Значением может быть целое или дробное число без единиц измерения.
img filter: brightness(30%);>img filter: brightness(30%); >
contrast ( )
Скопировать ссылку «contrast()» Скопировано
Меняет контраст изображения. В скобках можно указать любое значение от 0% и выше. Значение 0% сделает изображение полностью чёрным. Значение 100% вернёт изображению исходный контраст. Значение больше 100% усилит исходный контраст. Значением может быть целое или дробное число без единиц измерения.
img filter: contrast(250%);>img filter: contrast(250%); >
drop — shadow ( )
Скопировать ссылку «drop-shadow()» Скопировано
Задаёт тень для картинки. Тень располагается снаружи элемента. Эта функция очень похожа на box — shadow по допустимым значениям и результату. Разница лишь в том, что нельзя указывать ключевое слово inset .
img filter: drop-shadow(4px 4px red);>img filter: drop-shadow(4px 4px red); >
grayscale ( )
Скопировать ссылку «grayscale()» Скопировано
Делает изображение чёрно-белым. В скобках можно указать значение от 0% до 100%. Значение 100% сделает изображение полностью чёрно-белым. Значение 0% вернёт изображению исходные цвета. Значением может быть целое или дробное число без единиц измерения.
img filter: grayscale(80%);>img filter: grayscale(80%); >
hue — rotate ( )
Скопировать ссылку «hue-rotate()» Скопировано
Меняет цвета изображения за счёт поворота цветового круга. Угол поворота указывается в скобках функции. Можно указывать угол в градусах deg или в поворотах turn .
img filter: hue-rotate(0.5turn);>img filter: hue-rotate(0.5turn); >
invert ( )
Скопировать ссылку «invert()» Скопировано
Инвертирует цвета изображения, как бы выворачивает их, превращая в противоположные. В результате получается что-то вроде негатива. Можно указать процент инверсии от 0% до 100%. При 100% цвета на картинке полностью инвертированы. Отрицательные значения или значения больше 100% не допускаются.
img filter: invert(100%);>img filter: invert(100%); >
opacity ( )
Скопировать ссылку «opacity()» Скопировано
Меняет прозрачность изображения. Можно указать процент прозрачности от 0% до 100%. 0% делает картинку полностью прозрачной. 100% не меняет прозрачность изображения. Отрицательные значения или значения больше 100% не допускаются.
Очень похоже на работу свойства opacity с той разницей, что для фильтра браузер, как правило, применяет аппаратное ускорение для улучшения производительности.
img filter: opacity(40%);>img filter: opacity(40%); >
saturate ( )
Скопировать ссылку «saturate()» Скопировано
Меняет насыщенность цветов изображения. Значение 0% полностью убирает насыщенность цветов. Значение 100% не изменяет исходное изображение. Допускаются значения больше 100% что приводит к перенасыщенности. Нельзя указать отрицательное значение.
img filter: saturate(390%);>img filter: saturate(390%); >
sepia ( )
Скопировать ссылку «sepia()» Скопировано
Меняет цвета изображения на сепию — коричневые оттенки. Значение 100% полностью преобразует изображение в сепию. Значение 0% не изменяет исходное изображение. Отрицательные значения или значения больше 100% не допускаются. Можно использовать целое или дробное число без единиц измерения в качестве значения.
img filter: sepia(0.6);>img filter: sepia(0.6); >
Все фильтры сразу
Скопировать ссылку «Все фильтры сразу» Скопировано
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Можно указать сразу несколько фильтров для одного элемента, перечислив их через пробел.
На практике
Скопировать ссылку «На практике» Скопировано
Елена Соколовская советует
Скопировать ссылку «Елена Соколовская советует» Скопировано
🛠 С помощью drop — shadow ( ) мы можем создать тень по форме самого изображения. Функция учитывает альфа-канал картинки и способна отбрасывать не только прямоугольную тень, как в случае с box — shadow .
.box-shadow box-shadow: 4px 4px 10px red;>.drop-shadow filter: drop-shadow(4px 4px 10px red);>.box-shadow box-shadow: 4px 4px 10px red; > .drop-shadow filter: drop-shadow(4px 4px 10px red); >
Как изменить цвет PNG изображения с помощью CSS
Самый легкий способ для изменения цвета PNG изображения — это использование свойства filter.
Свойство filter применяет визуальные эффекты к элементу (изображению).
Оно имеет следующие значения:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;С помощью этих значений мы можем изменить цвет изображения.
Фильтры являются новыми для браузеров и поддерживаются только очень современными браузерами. Можно использовать фильтры вместе с -Webkit-filter для Safari, Google Chrome и Opera.
Давайте попробуем пошагово изменить цвет изображения:
1. Создайте HTML.
- Скопируйте и вставьте ссылку изображения в основную часть (body section). Здесь мы создаем две изображения с классами «image1» и «image2».
body> img src="https://www.sccpre.cat/mypng/detail/122-1229311_bird-feathers-flying-macaw-wings-birds-with-white.png" width="500px" height="250px" alt="filter applied" /> ![]()
" src="https://ru.w3docs.com/snippets/css/%3C/span%3Ehttps://www.sccpre.cat/mypng/detail/%3Cspan%20%3E122%3C/span%3E-%3Cspan%20%3E1229311%3C/span%3E_bird-feathers-flying-macaw-wings-birds-with-white.png%3Cspan%20%3E" width="500px" height="250px" alt="filter applied" />
