html - css 中的渐变分布不均匀

Question

我使用渐变作为背景。我希望渐变会开始变暗，并在到达应用它的容器的另一端时逐渐变亮。相反，我注意到较暗的部分覆盖了大约 90%，只有在这 90% 之后它才开始变亮。如果大约 50% 位于开始颜色和结束颜色之间的一半，那就太好了。有什么办法可以做到这一点？这是我的 CSS:

  background: -moz-linear-gradient(center bottom , #f4f7fa 0pt, #FFFFFF 100%) repeat scroll 0 0 transparent;
  background: linear-gradient(bottom, #f4f7fa 0, white 100%);
  background: -webkit-linear-gradient(bottom, #d6d6d6 0, white 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f7fa', endColorstr='#FFFFFF', GradientType=0);

Answer 1

尝试使用此代码

background: linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -o-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -moz-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -webkit-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);
background: -ms-linear-gradient(bottom, #D6D6D6 0%, #FFFFFF 50%);

渐变属性解释:

linear-gradient(Gradient Starting Position,Color & Offset,Color & Offset);

因此在您的代码中，颜色 #D6D6D6 从 0% 开始并向上移动，

然后颜色 #FFFFFF 表示形式 100%，因为偏移设置为 100%(并且它也在那里结束)。

因此，为了获得从一种颜色到另一种颜色的一致流动，您应该将第二种颜色的偏移量设置为 50%。

检查 this link更好地理解 CSS 渐变属性。

问候

湿婆