悬停时仅更改多个背景之一 [英] Change only one of multiple backgrounds on hover

问题描述

标题基本上说明了一切.

The title basically says it all.

这是一个例子:

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

如您所见，只有一张背景图片发生了变化 - 另一张在每种状态下都保持不变，但仍被声明 四次 次！

As you can see, only one of the background images changes - the other one stays the same in each and every state, but is still being declared four times!

那么，是否可以只更改其中一个背景，而将另一个保持原样 - 而不必一遍又一遍地重新声明它?

So, is it possible to only change one of the backgrounds, but leave the other one as is - without having to re-declare it over and over again?

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

推荐答案

现在可以使用 CSS 变量:

This is now possible with CSS variables:

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

在此处查看实际操作:https://jsfiddle.net/22zu6oaq/

这篇关于悬停时仅更改多个背景之一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！