平滑的 CSS 渐变

Posted 2023-03-06

【中文标题】平滑的 CSS 渐变

【英文标题】：Smooth CSS gradients

【发布时间】：2012-10-20 12:29:56

【问题描述】：

我正在学习如何使用 CSS 渐变。

我的问题是从上到下的渐变。您可以看到颜色变化中的“停止”。

这是我的 CSS 代码

#header  
   width:1000px; 
   height:250px; 
   background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599); 
   background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599); 

有没有办法平滑从上到下渐变中的停靠点？ （在我看来，这在从左到右或从右到左的渐变中不是很明显）

【参考方案1】：

造成这种弯曲效果的主要原因实际上是颜色的线性混合，这对人眼来说并不那么和谐。

Andreas Larsen 在 css-tricks.com (2017) 上写了一篇非常详尽的文章。 https://css-tricks.com/easing-linear-gradients/

它通过定义近似回旋曲线的多个色标来描述非线性渐变的概念。

会产生这样的结果（.gradient-clothoid）：

.gradient-wrp 
  display: flex;


.header 
  width: 100%;
  height: 250px;
  flex: 0 0 none;


.gradient-linear 
  background-image: linear-gradient(#bf7a30 30%, #edd599);


.gradient-smooth 
  background-image: linear-gradient(#bf7a30 25%, 75%, #edd599);


.gradient-clothoid 
  background-image: linear-gradient(
    rgba(191, 122, 48, 1) 0%,
    rgba(191, 122, 48, 0.3) 50%,
    rgba(191, 122, 48, 0.15) 65%,
    rgba(191, 122, 48, 0.075) 75.5%,
    rgba(191, 122, 48, 0.037) 82.85%,
    rgba(191, 122, 48, 0.019) 88%,
    rgba(191, 122, 48, 0) 100%
  );

<div class="gradient-wrp">
  <div class="header gradient-linear"></div>
  <div class="header gradient-smooth"></div>
  <div class="header gradient-clothoid"></div>
</div>

这个概念也被称为“稀松布”。

恕我直言，不太适合像原始示例那样“开始”色标：

渐变的前 30% 应具有 100% 的颜色强度。可能是为了确保标题的文本可读性更好 剩余的 70% 应该有平滑的颜色过渡。

我实际上更喜欢 Amelia Bellamy-Royds 的建议（cmets 下方的文章），它使用（得到很好支持的）渐变平滑，通过添加没有颜色定义的停止，如下所示：

.gradient-smooth
   background-image:linear-gradient(#BF7A30 25%, 75%, #EDD599); 

这将使 25% 和 75% 之间的渐变平滑到基于底部样条曲线而不是线性的。

.gradient-linear
   background-image:linear-gradient(#BF7A30 30%, #EDD599); 
 

【参考方案2】：

正如@nighthawk2534 提到的，为渐变添加更多颜色是可行的方法。显然，这些必须是“正确”的颜色。

我不太了解色彩理论，但偶然发现了一个很好的工具： https://mycolor.space/gradient

对于你的例子，它给出了：

background-image: linear-gradient(to right top, #bf7a30, #ca9148, #d5a861, #e1bf7d, #edd599);

看起来像这样： image

（我知道这个帖子很老了，但仍然可能会有所帮助）

【参考方案3】：

看看这个：

background-color: #bf7a30;
background-image: linear-gradient(0deg, #bf7a30 0%, #edd599 46%, #bf7a30 100%);

我很容易从www.gradientcss.com生成它

【参考方案4】：

认为下面的 css 将满足您的需求。

CSS：

#header 
    width:1000px;
    height:250px;
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Opera */ 
background-image: -o-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EDD799), color-stop(1, #BF7F37));
    /* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #EDD799 0%, #BF7F37 100%);

http://jsfiddle.net/xPLPH/

了解有关线性渐变的更多信息： https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

【讨论】：

这不是针对可见色标问题的解决方案。您只是建议不要在渐变之间使用色标并将它们移动到边缘：首先到 0%，最后到 100%。如果您像问题的作者代码一样移动色标，您可以看到这一点：jsfiddle.net/zoaporx0/1

根本没有答案。边缘仍然可见。

这不是解决问题的办法