做在薩斯背景速記語法

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; 
    }