为什么我的顶部线性渐变有效但底部无效？答案

【问题标题】：Why is my top linear gradient working but not bottom?为什么我的顶部线性渐变有效但底部无效？
【发布时间】：2016-09-30 19:30:13
【问题描述】：

我有一张背景图片，我希望线性渐变同时出现在顶部和底部。我认为我的 CSS 应该可以工作，但我只能让顶部渐变工作。功能 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>

链接：http://jakeford.io/pwi-test/home.html

【问题讨论】：

好吧，您问题中的最后一个 div 没有 features 类，所以这可能是问题所在？？

标签： html css background linear-gradients

【解决方案1】：

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

http://codepen.io/MakiBM/pen/NRaWrr

.bg {
  ...
  background-image: 
    linear-gradient(to bottom, white, transparent 40%, transparent 60%, white),
    url('https://a2ua.com/mountains/mountains-007.jpg');
  background-size: cover;
  background-position: center;
}

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

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

http://www.css3.info/preview/multiple-backgrounds/

【讨论】：

【解决方案2】：

谢谢大家，Bartek 说的没错，我给 div 的背景添加了渐变，而不是实际的背景图像。后台规则太多。

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

为我工作。

【讨论】：

很高兴我能帮上忙 :)

【解决方案3】：

我用this在CSS中生成渐变色，先试试不带webkit的使用。

【讨论】：