logo标签列表

如何使CSS渐变看起来更平滑？

cssgradientlinear-gradientssmoothing
8

我有一个黑色的背景，并想使用简单的CSS渐变从透明到0.7白色添加一个内部块：

linear-gradient(to right, 
    hsla(0, 0%, 100%, 0), 
    hsla(0, 0%, 100%, 0.76) 14%, 
    hsla(0, 0%, 100%, 0.76)
)

但这看起来很糟糕：

enter image description here

我找到的唯一方法是手动添加额外的颜色停止。

background: linear-gradient(
    to right,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.05) 2%,
    hsla(0, 0%, 100%, 0.09) 3%,
    hsla(0, 0%, 100%, 0.2) 5%,
    hsla(0, 0%, 100%, 0.57) 11.5%,
    hsla(0, 0%, 100%, 0.69) 14%,
    hsla(0, 0%, 100%, 0.75) 16.5%,
    hsla(0, 0%, 100%, 0.76) 17.5%,
    hsla(0, 0%, 100%, 0.77)
);

并且它看起来更好:

比较演示

在CodePen上的比较演示

有没有更简单的方法使CSS渐变在颜色停止点处更平滑？

您可以查看此帖子：https://dev59.com/TGYs5IYBdhLWcg3wFP94 - Angela Amarapala
在我自己提出问题之前，我已经阅读过它。那个问题中没有解决方案。所选答案只是建议不要使用除0和100％以外的颜色停止。我想解决这个问题，而不是采用变通方法。 - Даниил Пронин
很抱歉，但您可以使用这些示例http://codepen.io/taylorvowell/pen/BkxbC中的基本设置。 - roberrrt-s
@Roberrrt，除了“淡化”（5）- 0和80%之外，中间没有颜色停止的线性渐变，但颜色过于相似以至于看不到颜色停止。 - Даниил Пронин
啊，我明白了，它必须是线性的？ - roberrrt-s
是的，很明显它应该是线性的。 - Даниил Пронин
2个回答
3
1
我还没有完全理解你的意图，但据我所知，您想在黑色背景上添加一个盒子，其左侧有一个从透明（因此仍为黑色）到白色的渐变，透明度为0.7或#C2C2C2。如果这是您想要做的事情，我不会使用hsl（由于基本颜色理论），而是使用rgba。
请看这个：
<html>
<head>
<style>
#blackbg {
background-color: black;
height: 300px;
}

#grad1 {
    height: 200px;
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255, 255, 255, 0.7)); 
}
</style>
</head>
<body>

如果这不是你打算做的，或者你仍然感到卡住了，随时可以向我提问。
<div id="blackbg">
<div id="grad1"></div>
</div>

</body>
</html>
我想将其作为文本背景添加到我的带有图像背景的滑块上。它可以是深色或浅色，就像人们桌面上的壁纸一样。您可以在http://eco-vpk.ru上或在此屏幕截图中查看：http://imgur.com/a/73Ozc。 - Даниил Пронин
好的，现在我明白了。但是你想把渐变添加到哪里？产品处吗？你是为VKP工作还是这是你想要实现的？ - codingunicorn
我正在开发这个网站，想要实现的是在产品图片下方的渐变效果。 - Даниил Пронин
你能做到吗？还需要帮助吗？ :) - codingunicorn
该网站上的渐变与我问题中的渐变相同。它是手动调整的，以使其看起来平滑。我想要自动化它。 - Даниил Пронин
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接