Question

标题基本上都说明了一切。

以下是一个例子：

#element {
    background: url(image.png) no-repeat center center,
                linear-gradient(to top, #86a53c, #516520);
}

#element:hover {
    background: url(image.png) no-repeat center center,
                linear-gradient(to top, #A0C153, #516520);
}

#element:active {
    background: url(image.png) no-repeat center center,
                linear-gradient(to top, #516520, #A0C153);
}

正如您所看到的，只有一个背景图像发生了变化 - 另一个背景图像在每个状态中保持不变，但仍然被声明四个次！

那么，是否有可能只改变其中一个背景，但保留另一个背景 - 而不必一遍又一遍地重新声明它？

_{我知道其他CSS背景属性（重复，位置等）可以单独设置。这只是一个简单的例子......}

Answer 1

不，不，不能，抱歉。这听起来像是你可以提出的补充，虽然我不确定它在语法和级联方面的表现如何。

Answer 2

现在可以使用CSS变量：

#element {
    --gradient: linear-gradient(to top, #86a53c, #516520);

    background: url(image.png) no-repeat center center,
                var(--gradient);
}

#element:hover {
    --gradient: linear-gradient(to top, #A0C153, #516520);
}

在此处查看：[{3}}

在悬停时仅更改多个背景中的一个

2 个答案: