Question

我正在使用Web包编译的SCSS构建前端模板。我创建了一个具有图像的巨型飞船，并为其提供了可以正确显示的覆盖层，但是当给覆盖层提供不透明度0.8时，浏览器上都不会显示任何元素（图像和深色覆盖层）。

注意：该代码一直有效，直到我将其设为RGBA并增加了不透明度，然后停止显示

下面的SCSS代码：

.section {
  // position: relative;

  &-jumbotron {
    height: 40rem;
    background-image: linear-gradient(to right bottom, rgba(var(--color-grey-dark-1), 0.8), rgba(var(--color-grey-dark-5), 0.8)),
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

变量写在根文件夹中是：

:root {
  --color-grey-dark-1: #333333;
  --color-grey-dark-5: #222222;
}

Answer 1

:root {
  --color-grey-dark-1: #333333;
  --color-grey-dark-5: #222222;
}

.section {
  &-jumbotron {
    height: 40rem;
    background-image: linear-gradient(to right bottom, var(--color-grey-dark-1), var(--color-grey-dark-5));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

或者如果颜色需要是rgba，则可以这样：

:root {
  --color-grey-dark-1: 51, 51, 51;
  --color-grey-dark-5: 34, 34, 34;
}

.section {
  &-jumbotron {
    height: 40rem;
    background-image: linear-gradient(to right bottom, rgba(var(--color-grey-dark-1), 0.5), rgba(var(--color-grey-dark-5)));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

Answer 2

很高兴您已经收到一个可行的答案，但是我不得不问：既然您已经在使用SCSS，为什么不使用它提供的变量而不是常规CSS变量呢？

语法更简洁一点，您不必担心浏览器支持。

示例：

（请注意，您可以在任意位置定义SCSS变量。不过，最好将它们放在单独的文件中。）

  $color-grey-dark-1: rgb(51, 51, 51);
  $color-grey-dark-5: rgb(34, 34, 34);

.section {
  &-jumbotron {
    height: 40rem;
    background-image: linear-gradient(to right bottom, rgba($color-grey-dark-1, 0.8), rgba($color-grey-dark-5, 0.8));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

P.S。与您的问题有关的其他一些阅读材料：Use CSS variables with rgba for gradient transparency

带有叠加层的SCSS图片未显示

2 个答案: