Html 如何将鼠标悬停在使用渐变的图像上

我在我的网站上放置了一些交流图标。其中一个是Instagram图标，我是从Font Awesome那里得到的，我给出的颜色与使用渐变的Instagram图标的颜色大致相同。现在的问题是，如果我想：悬停它不工作。我不知道怎样才能修好它

页脚{
背景色：黑色；
高度：120px；
}
页脚a{
显示器：flex；
证明内容：中心；
字体大小：70px；
填充：20px；
文字装饰：无！重要；
}
.fa instagram{
背景：#f09433；
背景：莫兹线性梯度（45度，f09433 0%，e6683c 25%，dc2743 50%，cc2366 75%，bc1888 100%）；
背景：-webkit线性梯度（45度，f09433 0%，e6683c 25%，dc2743 50%，cc2366 75%，bc1888 100%）；
背景：线性梯度（45度，f09433 0%，e6683c 25%，dc2743 50%，cc2366 75%，bc1888 100%）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
.fa instagram：悬停{
颜色：hsla（181,6%，67%，0.5）；
}

网站标题

经过反复试验，我得出了这个结论。 我在

中使用
背景
而不是
颜色
。fa instagram:hover

然后我添加了

-webkit背景剪辑：text

和

-webkit文本填充颜色：透明
并且我添加了一个
转换：2s
，但是如果您不想，您仍然可以删除它



页脚{
背景色：黑色；
高度：120px；
}
页脚a{
显示器：flex；
证明内容：中心；
字体大小：70px；
填充：20px；
文字装饰：无！重要；
}
.fa instagram{
背景：#f09433；
背景：莫兹线性梯度（45度，f09433 0%，e6683c 25%，dc2743 50%，cc2366 75%，bc1888 100%）；
背景：-webkit线性梯度（45度，f09433 0%，e6683c 25%，dc2743 50%，cc2366 75%，bc1888 100%）；
背景：线性梯度（45度，f09433 0%，e6683c 25%，dc2743 50%，cc2366 75%，bc1888 100%）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
.fa instagram：悬停{
背景：hsla（181,6%，67%，0.5%）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
过渡：2s；
}

网站标题
您必须更改背景，而不是颜色。请注意，仅更改背景图像以不覆盖背景剪辑属性：


页脚{
背景色：黑色；
高度：120px；
}
页脚a{
显示器：flex；
证明内容：中心；
字体大小：70px；
填充：20px；
文字装饰：无！重要；
}
.fa instagram{
背景图像：线性梯度（45度，f09433 0%，e6683c 25%，dc2743 50%，cc2366 75%，bc1888 100%）；
-webkit背景剪辑：文本；
背景剪辑：文本；
-webkit文本填充颜色：透明；
}
.fa instagram：悬停{
背景图像：线性梯度（hsla（181,6%，67%，0.5），hsla（181,6%，67%，0.5））；
}