html - 将背景图像与渐变相结合在我的情况下不起作用？

Question

演示 http://jsfiddle.net/hfkhb9eL/

我用这个做渐变background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%); 它有效，但是在我尝试将它与背景图像合并后它不起作用，这有什么问题:

  background-image: url(http://i.imgur.com/Hsban3N.jpg), -webkit-linear-gradient(top,rgba(0,0,0,0)0%,rgba(0,0,0,0.65)100%);

?

Answer 1

我认为您的图像/渐变顺序错误。

div {
  width: 100px;
  height: 100px;
  background-image:
 -webkit-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65) 100%), 
  url('http://i.imgur.com/Hsban3N.jpg');
}

<div>hi</div>

基本上，堆叠顺序是第一个声明在上面，下一个在下面......等等。