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

【问题标题】：Multiple div elements with the same linear gradient background do not look the same具有相同线性渐变背景的多个 div 元素看起来不一样
【发布时间】：2015-06-11 05:24:02
【问题描述】：

我遇到了一个奇怪的问题，我在同一页面上有 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 上发生。

【问题讨论】：

尝试改变屏幕的角度......我想你会发现一个因素。

标签： html css

【解决方案1】：

这是一种视错觉。第二个和第三个 div 的顶部紧挨着一个黑色区域（前一个 div 的底部），所以你的大脑 enhances the contrast 在它们之间，使 div 的顶部看起来更亮。第一个 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>

【讨论】：