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看起来更亮，与其他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>

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

1 个答案: