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);

请参阅此链接以获取 + 信息

阴影滤镜比较