В фотографии регулировка контраста изображения часто является важной частью процедуры обработки сообщений. Контрастность означает разницу между светом и тёмным снимком. В цветовом спектре изображения самый темный цвет, а самый светлый это белая палитра. Высоко контрастное изображение, это картинка которое отображает большое количество тонов между этими двумя крайностями.
Напротив изображение с низким контрастом является тем, у которого нет слишком большого изменения между светлыми и темными тонами. Картинки с высоким контрастом, как правило, яркие, тогда как снимок с низким контрастом имеют тенденцию быть тусклыми и затемненными.
Когда речь идет о контрастах с картинками, которая часто возникает и регулирует яркость кадра. Изменение яркости, это еще один способ изменения тонов изображения, чтобы добиться определенного вида. Можно настроить контрастность и яркость снимка в CSS. Это делается с помощью свойства фильтра, что будут представлены ниже. Свойство фильтра позволяет изменять диапазон картинки, где два значения свойства фильтра, это контраст и яркость. Ниже приведены примеры того, как каждый работает.
Контрастировать
Контраст принимает процентные значения от 0% до более 100%. Значение 100% не приводит к изменению изображения. Значения менее 100% уменьшают контрастность снимка, тогда как значения, превышающие 100%, увеличивают контрастность картинки.
Десятичные значения также приемлемы в качестве входных значений. Ниже приведены несколько примеров применения различных контрастов к снимку. Как вы можете видеть на 70%, снимка более темное, чем исходная картинка. По мере увеличения контраста тени становятся темнее, тогда как светлые тона снимка становятся ярче.
Яркость
Синтаксис регулировки яркости, это фильтр яркость по значению. Яркость, что подобна контрасту принимает процентные значения от 0% до 100%. Показание 100% сохраняет исходную виртуальность. Любое значение менее 100% уменьшает картинку с параметром 0%, что приводит к полностью черному снимку. Значения более 100% увеличивают яркость изображения.
CSS фильтры
HTML
Код
<!DOCTYPE html>
<html>
<body>
<img src="http://zornet.ru/Aben/44KmLLxOQumDDDfed0mnlw.png" style="height:250px;" >
</body>
</html>
Изменение на черно-белый 100% серый:
CSS
Код
img {
-webkit-filter: grayscale(99%);
filter: grayscale(99%);
}
Пример размытия
Примените эффект размытия:
Код
img {
-webkit-filter: blur(5px);
filter: blur(5px);
}
Пример яркости
Отрегулируйте яркость:
Код
img {
-webkit-filter: brightness(200%);
filter: brightness(200%);
}
Пример контрастности
Отрегулируйте контрастность:
Код
img {
-webkit-filter: contrast(199%);
filter: contrast(199%);
}
Пример Drop Shadow
Примените эффект тени:
Код
img {
-webkit-filter: drop-shadow(8px 8px 10px gray);
filter: drop-shadow(8px 8px 10px gray);
}
Пример оттенков серого
Преобразование изображения в оттенки серого:
Код
img {
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}
Пример поворота Hue
Примените цвет изображения:
Код
img {
-webkit-filter: hue-rotate(87deg);
filter: hue-rotate(87deg);
}
Обратный пример
Инвертировать образцы:
Код
img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
Пример непрозрачности
Установите уровень непрозрачности:
Код
img {
-webkit-filter: opacity(70%); /* Safari */
filter: opacity(70%);
}
Пример насыщения
Насыщение:
Код
img {
-webkit-filter: saturate(760%);
filter: saturate(760%);
}
Пример сепии
Преобразование изображения в сепию:
Код
img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
Демонстрация:
Использование нескольких фильтров:
Чтобы использовать несколько фильтров, отделите каждый фильтр пробелом. Обратите внимание, что порядок важен (т. Е. С использованием grayscale после того, как sepia приведет к полностью серому изображению.
Демонстрация:
Свойство фильтра определяет визуальные эффекты, например, размытие и насыщенность для элемента в часносто img.
Вывод:
Изображения - отличный способ улучшить контент страницы и более эффективно общаться с пользователями. Свойство CSS фильтра можно использовать для быстрого и легкого создания ярких высоко контрастных картинок или тускло контрастных снимков.
