Question

demo 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:after{
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65)100%);
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    content:'';
    display:block;

}

http://jsfiddle.net/hfkhb9eL/1/

Answer 2

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

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>

基本上，首先声明堆叠顺序在顶部，而下一个在下面......等等。

将背景图像与渐变结合起来并不适用于我的情况？

2 个答案: