在悬停时只更改多个背景中的一个 [英] Change only one of multiple backgrounds on hover

问题描述

$ b

这是一个例子：

  #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，
线性渐变（顶部，＃A0C153， ＃516520）; 
} 
 
 #element：active {
 background：url（image.png）no-repeat center center，
线性渐变（顶部，＃516520， ＃A0C153）; 
} 
  

正如你所看到的，只有一个背景图片更改 -

因此，可以只更改其中一个

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

解决方案

现在可以使用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）; 
} 
  

查看此处的操作： https://jsfiddle.net/22zu6oaq/

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...}

解决方案

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/

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