平滑的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

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

\n

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

\n

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

\n

会导致类似这样的结果（.gradient-clothoid）：

\n

\r\n

\r\n

.gradient-wrp {\n  display: flex;\n}\n\n.header {\n  width: 100%;\n  height: 250px;\n  flex: 0 0 none;\n}\n\n.gradient-linear {\n  background-image: linear-gradient(#bf7a30 30%, #edd599);\n}\n\n.gradient-smooth {\n  background-image: linear-gradient(#bf7a30 25%, 75%, #edd599);\n}\n\n.gradient-clothoid {\n  background-image: linear-gradient(\n    rgba(191, 122, 48, 1) 0%,\n    rgba(191, 122, 48, 0.3) 50%,\n    rgba(191, 122, 48, 0.15) 65%,\n    rgba(191, 122, 48, 0.075) 75.5%,\n    rgba(191, 122, 48, 0.037) 82.85%,\n    rgba(191, 122, 48, 0.019) 88%,\n    rgba(191, 122, 48, 0) 100%\n  );\n}

\r\n

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

\r\n

\r\n

\r\n

\n

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

\n

恕我直言，不太适合像原始示例那样“启动”颜色停止点：

\n

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

\n

我实际上更喜欢 Amelia Bellamy-Royds\xe2\x80\x99 提案（下面评论中的文章），通过添加不带颜色定义的停止点来使用（良好支持的）渐变平滑，如下所示：

\n

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

\n

这将使 25% 到 75% 之间的梯度平滑到基于底部样条的非线性梯度。

\n

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

\n

Answer 2

认为下面的 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