Функция brightness
Функция brightness позволяет изменить
яркость фонового изображения. Исходная яркость
фона определяется значением 100% или 1,
при их уменьшении снижается и яркость изображения.
Соответственно при увеличении значения более 100%
яркость повышается. Отрицательные значения не применяются,
а пустое значение автоматически воспринимается
как 1.
Синтаксис
селектор {
filter: brightness(число);
}
Пример
Давайте установим для нашего изображения яркость
в 20%:
<div id="elem"></div>
#elem {
filter: brightness(20%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
А теперь давайте увеличим яркость изображения
до 120%:
<div id="elem"></div>
#elem {
filter: brightness(120%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
Давайте установим для нашего изображения исходную яркость:
<div id="elem"></div>
#elem {
filter: brightness(1);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Смотрите также
-
функция
blur,
которая размывает фон -
функция
contrast,
которая задает контрастность фону -
функция
drop-shadow,
которая задает тень фону -
функция
hue-rotate,
которая задает цветность фону -
функция
invert,
которая инвертирует цвета фона -
функция
opacity,
которая задает прозрачность фону -
функция
sepia,
которая преобразует фон в сепию -
свойство
background,
представляющее собой свойство-сокращение для фона -
свойство
background-image,
с помощью которого блоку можно задать фоновую картинку -
свойство
filter,
которое задает стиль для фона