为什么我的顶部线性渐变起作用但底部不起作用？

Question

我有一张背景图片，我希望线性渐变同时出现在顶部和底部。我以为 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>

Link: http://jakeford.io/pwi-test/home.html

Answer 1

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

Answer 2

您应该将多个渐变色标与使用逗号定界符传递的多个背景定义相结合，而不是用一个背景图像规则覆盖另一个规则。这是您的用例的代码笔：

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/

Answer 3

谢谢大家，你是对的 Bartek，我正在为 div 的背景提供渐变，而不是实际的背景图像。后台规则太多。

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

对我有用。

为什么我的顶部线性渐变起作用但底部不起作用？

Why is my top linear gradient working but not bottom?

html

css

background

linear-gradients