Html 为什么我的顶部线性渐变工作，但底部不工作？

我有一个背景图像，我希望线性梯度在顶部和底部。我以为我的CSS应该可以工作，但我只能让顶部渐变工作。在features div下面有一个div，我想知道这是否把事情搞砸了？我现在正在痛击我的头：D

  .features{
  height: 300px;
  background: linear-gradient(top, #fff, transparent);
  background: linear-gradient(to bottom, transparent, #fff);
  background-image: url('assets/Background_Features.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 }

<div class="container-fluid p-x-0 features text-xs-center">

</div>
<div class="container-fluid p-x-0 p-b-3 m-t-3 pricing text-xs-center">

</div>

。功能{
高度：300px；
背景：线性渐变（顶部，#fff，透明）；
背景：线性渐变（至底部，透明，#fff）；
背景图片：url（'assets/background_Features.jpg'）；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}

---

链接：

我使用CSS生成渐变色，请先尝试在不使用任何webkit的情况下使用

您应该将多个渐变停止点与使用coma分隔符传递的多个背景定义相结合，而不是用另一个覆盖一个背景图像规则。下面是一个用于您的用例的代码笔：

以及关于这两种技术的一些资源：

---

谢谢大家，你说得对，Bartek，我给的是div背景的渐变，而不是实际的背景图像。太多的背景规则

  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.000000001), rgba(255, 255, 255, .99)),
                url('assets/Background_Features.jpg');

---

为我工作。

好吧，你问题的最后一个部分没有

功能

类，所以这可能是问题所在？？很高兴我能帮忙：）

  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.000000001), rgba(255, 255, 255, .99)),
                url('assets/Background_Features.jpg');