Css 悬停时用颜色填充图像/按钮

我是CSS和Wordpress的新手，我花了一整晚的时间试图寻找解决方案，希望你能帮助我

我有这样的形象，当有人在上面徘徊时，我希望中间的白色/透明部分填充从底部到顶部的颜色f7CA18

。

我尝试了以下方法，只是为了尝试从白色/透明内部到我想要的颜色进行简单的过渡，但是没有一种方法奏效。我不确定我在wordpress中是否做错了什么；在“外观>编辑器”下，我将css代码粘贴在底部，然后在带有图像的页面上编辑图像并键入框（图像css类）

。例如，循环测试

。循环测试{
背景：#ffffff；
过渡性质：背景；
过渡时间：1s；
过渡时间函数：线性；
}
.循环测试：悬停{
背景：#f7ca18；
}

。循环测试：悬停{
背景色：#f7ca18；
}

。循环测试{
背景：无；
}
.循环测试：悬停{
背景：#f7ca18；
}

完全可行。其中的诀窍是添加100%的边界半径，以在图像周围创建一个圆。这里有三种方法可以做到这一点

我还裁剪并重新导出了您的图像，使其成为一个完美的275px正方形（如果您需要在不规则形状的图像上进行bg转换，您可以查看SVG）。非常欢迎您下载该图像并使用它

我做得很快，所以如果你有任何问题，请告诉我

/*选项1：仅图像*/
.循环试验{
显示：块；
保证金：0自动；
边界半径：100%；
背景图像：url（'http://www.heavilyedited.com/hands-temp.png');
背景重复：无重复；
-webkit转换：背景1s线性；
-moz跃迁：背景1s线性；
过渡：背景1s线性；
}
.循环测试：悬停{
背景色：#f7ca18；
}
/*选项2：带背景图像的Div*/
.circle-test2{
显示：块；
宽度：275px；
高度：275px；
保证金：0自动；
边界半径：100%；
背景图像：url（'http://www.heavilyedited.com/hands-temp.png');
背景重复：无重复；
过渡：背景1s线性；
}
.circle-test2：悬停{
背景色：#1D9B8D；
}
/*选项3：图像位于div内部*/
.circle-test3{
显示：块；
宽度：275px；
高度：275px；
保证金：0自动；
边界半径：100%；
背景图像：url（'http://www.heavilyedited.com/hands-temp.png');
背景重复：无重复；
-webkit转换：背景1s线性；
-moz跃迁：背景1s线性；
过渡：背景1s线性；
}
.circle-test3：悬停{
背景色：#00aeef；
}

---

您最好有两个不同的图像，悬停时显示新图像。你想做的事情太乱了