Функция 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,
което задава стил за фона