CSS - 更改背景图像而不影响线性渐变？

Question

我有一个div，用于表示网站上的类别。 div被赋予一个类，该类对应于类别的名称。

div首先使用以下Sass mixin：

给出默认背景

@mixin category-background($from, $to, $image) {
    background: linear-gradient(top, $from, $to), url(#{$image}) no-repeat top center;
    background-size: cover;
}

然后我会这样称呼：

div.header {
    @include category-background(transparentize(#fff, $header-transparentize), transparentize(#fff, $header-transparentize), 'default.jpg');
}

如果我有特定的背景，我会再次使用正确的图像调用mixin：

div.header.specfic-category {
    @include category-background(transparentize(#fff, $header-transparentize), transparentize(#fff, $header-transparentize), 'specific-image.jpg');
}

我担心在编译时会产生很多重复的CSS。无论如何只是替换背景图像而不影响渐变？

任何建议表示赞赏。

由于

Answer 1

不，你不能单独指定它们。

linear gradient用作图像，因此您实际上为该元素指定了两个背景图像。当您指定多个背景图像时，您必须同时指定它们，您不能将它们分开设置。

Answer 2

如果我认为您正在努力实现我的想法，那么您正在寻找的是::before和::after组合？

在这个例子中，我添加了渐变并在悬停时将png图像（使用::before）更改为更暗：