CSS - 在不影响线性渐变的情况下更改背景图像？答案

【问题标题】：CSS - Change background image without affecting linear gradient?CSS - 在不影响线性渐变的情况下更改背景图像？
【发布时间】：2014-11-14 12:50:03
【问题描述】：

我有一个 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。无论如何只替换背景图像而不影响渐变？

任何建议表示赞赏。

谢谢

【问题讨论】：

标签： css sass

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：