Какое значение фильтра яркости CSS соответствует данному полупрозрачному черному наложению для затемнения изображения? ⇐ CSS

[Anonymous]

Полупрозрачное черное наложение – популярный способ затемнить изображение; но учитывая, что поддержка последней версии IE закончилась некоторое время назад и все современные браузеры поддерживают фильтр: яркость(...), теперь мы можем отказаться от этого громоздкого подхода и заменить его одной строкой CSS.
Но как именно связана корреляция между значением непрозрачности или альфа-канала черной наложенной вуали и значением яркости функции фильтра, которая приводит к одинаковому визуальному виду?Вот пример для обоих подходы:

Код: Выделить всё

.container {
padding: 0;
position: relative;
width: 100px;
height: 100px;
}

.image {
object-fit: cover;
width: 100%;
height: 100%;
}

.veil {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #000000;  // these two lines could be replaced by using a background color
opacity: 0.5;               // with an alpha channel: #0000007F is black at 0.5 opacity
}

.darken {
filter: brightness(0.5);
}

Код: Выделить всё

using overlay
[img]https://images.unsplash.com/photo-1726853546098-380e29da9e31?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D[/img]




using filter
[img]https://images.unsplash.com/photo-1726853546098-380e29da9e31?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D[/img]

Подробнее здесь: https://stackoverflow.com/questions/793 ... nt-black-o