Несколько элементов div с одним и тем же линейным градиентом не выглядят одинаково

Question

У меня странная проблема, когда у меня есть 3 элемента div на одной странице, все они имеют одинаковый фон с линейным градиентом.

Я ожидал, что все эти divs будут выглядеть одинаково, но первый div немного темнее, чем другой.

Я создал this fiddle, чтобы продемонстрировать.

В принципе, у меня есть этот HTML

<div class="a"></div> 
<div class="a"></div> 
<div class="a"></div> 

И это Прилагаемые CSS

.a { 
    height: 200px; 
    width: 100%; 
    background-image: linear-gradient(to bottom, rgb(50, 50, 50), black); 
} 

Это может показаться немного мелкой, но на моем реальном сайте, это выглядит очень плохо.

Это происходит на моем надежном ноутбуке ubuntu, как в хроме, так и в firefox. Не уверен, что это происходит на Mac или Windows.

Answer 1

Это оптическая иллюзия. Верхняя часть второго и третьего divs находится непосредственно рядом с черной областью (дном предыдущего div), поэтому ваш мозг enhances the contrast между ними, делая верхнюю часть div более яркой. Верхняя часть первого div находится рядом с белым фоном, поэтому такого эффекта не происходит (на самом деле это, вероятно, воспринимается как более темное, чем оно есть на самом деле). Если вы установите черный фон, первый div выглядит более ярким, похожим на другие (чем больше черных вы разрешаете в верхней части страницы, тем больше похоже они выглядят).

.a { 
 
    height: 200px; 
 
    width: 100%; 
 
    background-image: linear-gradient(to bottom, rgb(50, 50, 50), black); 
 
} 
 

 
body { 
 
    background: black; 
 
}

<br> 
 
<br> 
 
<br> 
 
<div class="a"></div> 
 
<div class="a"></div> 
 
<div class="a"></div>