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

在Sass背景速记语法中做多个背景

1 个答案: