CSS3 Linear gradient function (darker line between image and gradient)

问题

So I am trying to make a linear gradient from an image with a solid color, however, there's a darker line visable where the color and gradient cross:

example:

The CSS:


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

How to solve this?

Thank you!

回答1:

It's actually an optical illusion. If you check the HSL values pixel per pixel, you'll see that the color isn't actually getting darker, and the gradient works as expected. I guess it's just the way our eyes perceive such a drastic change in colors (dark green to white).

I suggest try adding a color in between these two or maybe make the top green color a bit lighter. Try to experiment until you find a good match.

来源：https://stackoverflow.com/questions/52322687/css3-linear-gradient-function-darker-line-between-image-and-gradient