淡入 SVG 背景图像

【问题标题】：Fade in SVG background image淡入 SVG 背景图像
【发布时间】：2015-10-21 20:36:05
【问题描述】：

当鼠标悬停在 SVG 精灵作为背景图像时，我遇到了从一个图标淡入到另一个图标的问题。

#About1 a {
    background: url(../_images/Center_Nav.svg) no-repeat center -788px;
}

#About1 a:hover {
    background: url(../_images/Center_Nav.svg) no-repeat center -888px;
}

我尝试了在网上找到的不同方法，但没有任何效果，我错过了什么？

【问题讨论】：

标签： jquery html css svg

【解决方案1】：

让两个图像都可见，一个在另一个之上（所以你只能看到最上面的那个）。

悬停时，降低顶部图像的不透明度。

.fade {
   transition: opacity 5s ease-in-out;
}

.fade:hover {
   opacity: 0;
}

类似这样的东西（尽管您可能还需要 Chrome/Opera/Safari 的 -webkit-animation），顶部图像具有“淡入淡出”类

【讨论】：

您如何将其放入代码中，同时为褪色添加特定时间？