为什么我的线性渐变在我的背景图像上无法正常工作？ （铁轨和萨斯）

Question

我有一张背景图片，我试图让线性渐变显示出来。我已经检查了一些其他问题，但这些答案似乎都不适合我。到目前为止我有这个......

    .bottom-pic
        width: 100%
        height: 425px
        background-image: url("bottom-img-3.png")
        background-size: cover
        background-repeat: no-repeat
        background-position: 0 -255px
        position: relative

      .overlay
          background: linear-gradient(-180deg, #20202C 34%, rgba(32,32,44,0.00) 81%, #20202C 100%)

我的渐变仍未出现。

Answer 1

您的元素只能有一个背景图像。由于背景图像已经由网址给出，其余部分将被忽略。

要叠加图像，您需要在元素中放置一个具有背景图像的附加DIV元素，并在其中应用渐变背景。当然，您需要确保包含的元素与其父元素具有相同的宽度和高度。

Answer 2

取决于您/访问者使用的浏览器 - 您需要为其中某些浏览器使用前缀，例如-webkit-linear-gradient...等。

这是一个可以帮助渐变上的前缀的工具： http://www.css3factory.com/linear-gradients/

或者这个（更常见的CSS前缀）：http://output.jsbin.com/gufoko/quiet