问题
The title basically says it all.
Here's an example:
#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?
I know that the other CSS background properties (repeat, position etc.) can be set separately. This is just a quick example...
回答1:
Nope, no can do yet, sorry. This sounds like an addition that you can propose, though I'm not sure how it'd play out in terms of syntax and the cascade.
回答2:
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);
}
See it here in action: https://jsfiddle.net/22zu6oaq/
来源:https://stackoverflow.com/questions/9845224/change-only-one-of-multiple-backgrounds-on-hover