做在萨斯背景速记语法

Question

多背景，我试图做多的背景场景，我有一个图像，然后在上面我有一个低透明度颜色，使其显示通过它下面的图像。

我知道我可以用一个伪元素来实现这样简单的事情，但是我想给多个背景努力一个镜头，但我不确定如何使用Sass速记background语法来做这件事。

比如我有这样的图像背景：

background: { 
    image: url('../images/hero-mobile.jpg'); 
    position: top center; 
    size: cover; 
    repeat: no-repeat; 
}; 

但现在我试图找出如何使用这个语法来添加其他背景。

我发现this page其中提出类似：

background: { 
    linear-gradient(
     rgba(0, 0, 0, 0.3), 
     rgba(0, 0, 0, 0.3) 
    ), 
    image: url('../images/hero-mobile.jpg'); 
    position: top center; 
    size: cover; 
    repeat: no-repeat; 
}; 

但我得到一个解析错误：

线性梯度必须跟一个 “：”

我可以用什么方式做到这一点？

Answer 1

线性梯度不是背景的短手属性。图像，位置，大小等，都是简写的。

您需要将线性渐变的属性的图像。

background: {  
    image: linear-gradient(
     rgba(255, 0, 0, 0.45), 
     rgba(255, 0, 0, 0.45) 
    ), 
    url('../images/hero-mobile.jpg');; 
    position: top center; 
    size: cover; 
    repeat: no-repeat; 
    }