Sassのバックグラウンド略語構文で複数の背景を使用する

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