本文介绍了悬停时仅更改多个背景之一的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
标题基本上说明了一切.
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 变量:
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/
这篇关于悬停时仅更改多个背景之一的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!