CSS3线性渐变功能(图像和渐变之间的暗线)

问题描述

因此，我试图从具有纯色的图像中创建线性渐变，但是在颜色和渐变交叉处可见一条较深的线:

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:

示例:

The CSS:


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

如何解决这个问题?

谢谢！

推荐答案

这实际上是一种错觉.如果检查每个像素的HSL值像素，您会发现颜色实际上并没有变暗，并且渐变按预期工作.我想这只是我们的眼睛感知到这种急剧变化的颜色(从深绿色到白色)的方式.

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.

这篇关于CSS3线性渐变功能(图像和渐变之间的暗线)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！