css - 平滑的 CSS 渐变

Question

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

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

这是我的 CSS 代码

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

有没有办法消除从上到下渐变中的停靠点？ (在我看来，这在从左到右或从右到左的渐变中不是很明显)

Answer 1

造成这种 flex 效果的主要原因实际上是颜色的线性混合，这在人眼中并不和谐。

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 的提议(下面评论中的文章)通过添加没有颜色定义的停止来使用(得到很好支持的)梯度平滑:

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

这会将 25% 到 75% 之间的渐变平滑到基于底部样条且非线性。

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