0

我使用渐变作为背景。我希望渐变开始时会变暗并逐渐变亮，因为它到达应用它的容器的另一端。相反，我注意到较暗的部分覆盖了大约 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);
4

1 回答 1

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%);

梯度性质说明：

线性渐变（渐变起始位置，颜色和偏移量，颜色和偏移量）；

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

然后颜色 #FFFFFF 以 100% 的形式表示，因为偏移量设置为 100%（它也在那里结束）。

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

检查此链接以更好地理解 CSS Gradient 属性。

问候

湿婆

于 2013-08-15T04:40:43.680 回答