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

但是我得到了一个解析错误:

linear-gradient must be followed by a ":"

有什么方法可以做到这一点？

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