在渐变上使用背景图像

Question

我想要实现的是，我在 div 背景上有渐变，我试图在渐变上添加背景图像（图像只是一个图案），但要么只应用渐变，要么只应用图案，不是都 我用这段代码得到一个白色背景：

 #box{
    padding:50px;
    background:linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0% transparent url('bs-docs-masthead-pattern.png') repeat scroll center center transparent;
    } 

只有渐变：

#box{
background:linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0% 
}
 #box:after{
 background: transparent url('pattern.png') repeat scroll center center transparent;
}

我做错了什么？

Answer 1

如下所示更新您的 CSS。

 #box{
  background:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSXwTmM2R_vmBHFpn720_8bGOaegnP5Kawh0wb4JggN5rUALGwGvw') no-repeat center center, linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0%;
  height:500px;
   }

FIDDLE DEMO

Answer 2

在伪元素中添加content:""

* {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      height: 100%;
    }
    #box {
      background: linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0%;
      width: 100%;
      height: 100%;
    }
    #box::after {
      content: "";
      background: url('http://s28.postimg.org/rfznph7ul/pattern.png');
      width: 100%;
      height: 100%;
      display: block;
    }

<div id="box"></div>