在 Sass background shorthand 语法中做多个背景

Question

我正在尝试做一个多背景场景，我有一个图像，然后在顶部我有一个低不透明度的颜色，所以它会显示到它下面的图像。

我知道我可以用一个伪元素很容易地实现这样的事情，但我想试一试多重背景，但我不确定如何使用 Sass shorthand 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

线性渐变不是背景的简写属性。图片、位置、大小等，都是shorthand的。

您需要将线性渐变作为属性放置到图像中。

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

在 Sass background shorthand 语法中做多个背景

Doing multiple backgrounds in Sass background shorthand syntax

css

sass

background-image

background-color