CSS3 Линейная функция градиента (более темная линия между изображением и градиентом)

Question

Итак, я пытаюсь создать линейный градиент для изображения со сплошным цветом, однако там, где цвет и градиент пересекаются, видна более темная линия:

пример:

The CSS:


.green-background {
    background: linear-gradient(to bottom, #3c7c3f, #ffffff);
    background: #3c7c3f;
    background: -webkit-linear-gradient(top, #3c7c3f, #ffffff);
    padding: 100px 0;
}

Как это решить?

Спасибо!

Answer 1

Это на самом деле оптическая иллюзия.Если вы проверите значение HSL пиксель на пиксель, вы увидите, что цвет на самом деле не становится темнее, и градиент работает, как и ожидалось.Я полагаю, что именно так наши глаза воспринимают такое резкое изменение цвета (от темно-зеленого до белого).

Я предлагаю попробовать добавить цвет между этими двумя или, возможно, сделать верхний зеленый цвет немного светлее.Попробуйте экспериментировать, пока не найдете хорошее совпадение.