Css 在Sass背景速记语法中执行多个背景

我试着做一个多背景场景，我有一个图像，然后在上面我有一个低不透明度的颜色，这样它就可以通过下面的图像显示出来

我知道用一个伪元素可以很容易地实现类似的功能，但我想尝试一下多重背景，但我不确定如何使用Sass速记

background

语法

例如，我将其用于图像背景：

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

但是现在我正试图找出如何使用这个语法来添加另一个背景

我发现它提出了如下建议：

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

但我得到了一个解析错误：

线性渐变后面必须跟一个“：”

---

我该怎么做呢？

线性渐变不是背景的简单属性。图像、位置、大小等都是速记

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

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

---

非常感谢。我再次看了那个页面后意识到我看错了CSS，因为我以为他是在用它作为速记属性，但现在我发现他用的CSS样式比Sass更多。