filter - 通过 CSS3(过滤器)更改图像颜色

Question

我有一个用作链接的 png 图像，我想让它在悬停时产生效果。例如，它的背景颜色变为橙色。我可以通过 CSS 实现吗？

或任何其他效果，例如 png 图像内形状周围的橙色阴影，而不是整个图像(包括透明区域)。

This is the code so far:

.latestTrack img {
    float:right;
    margin-right:50px !important;
}
.latestTrack img:hover {
    box-shadow: 0 0 10px orange; 
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

Answer 1

您可以使用投影滤镜在 png alpha 图像的形状周围设置阴影。

-webkit-filter: drop-shadow(10px 10px 10px gray);

查看此链接以获取更多信息

drop shadow filter comparison