html - 具有相同线性渐变背景的多个 div 元素看起来不一样

Question

我遇到了一个奇怪的问题，我在同一个页面上有 3 个 div 元素，它们都具有相同的线性渐变背景。

我希望所有这些 div 看起来都一样，但第一个 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 可信赖的笔记本电脑上，在 chrome 和 firefox 中。不确定它是发生在 Mac 还是 Windows 上。

Answer 1

这是一种视错觉。第二个和第三个 div 的顶部紧挨着一个黑色区域(前一个 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>