Css 背景图像上的SVG淡出滤波器

我有一个带有背景图像的元素集合，这些元素上有一个SVG过滤器，使背景图像变成灰色。我需要它，这样当您将鼠标悬停在该元素上时，SVG过滤器将淡入透明状态，以便原始彩色图像显示时不显示过滤器。不幸的是，我似乎无法做到这一点。以下是CSS：

.badge__image {
    background-position: center;
    filter: url(/dist/filter.svg#duotone_bluetan);
}
.badge__image:hover {
    -webkit-transition : -webkit-filter 1000ms ease;
    transition: filter 1000ms ease;
    filter: url(/dist/filter.svg#clear);;
}

无论我怎么做，转变都是瞬间的。图像必须是背景图像，我需要以某种方式完成SVG过滤器转换。我对SVG过滤或动画不是非常精通，我在网上找不到一个这样做的例子。感谢您的帮助

编辑

所以我在元素内部粘贴了一个副本，并对其进行绝对定位，然后淡出内部元素。这是单向的，它会淡入父背景，但是，一旦不悬停，内部元素的不透明度会立即跳到1，而不会发生过渡。我错过了什么

.badge__image-filter {
    position: absolute;
    left: 0px;
    top: 0px;
    background-position: center;
    opacity: 1 !important;
    -webkit-transition: all 1000ms !important;
    transition: all 1000ms !important;
    filter: url(/dist/filter.svg#duotone_bluetan);
}
.badge__image-filter:hover {
    opacity: 0 !important;
    -webkit-transition: all 1000ms !important;
    transition: all 1000ms !important;
}

---

在这里，您要求CSS转换在一个

url（）

值与另一个值之间进行转换。CSS引擎知道，这些只是字符串值，不能转换

你可以通过各种方式实现你想要的

其中一种方法是复制元素，将两个元素都绝对放置，并将每个过滤器应用到自己的元素上，然后转换两个元素的

不透明度

#清除、过滤{
位置：绝对位置；
排名：0；
左：0；
过渡：不透明度1s；
}
#过滤{
过滤器：url（#blurMe）；
}
#清楚的{
不透明度：0；
}
#续{
位置：相对位置；
}
#续：悬停#过滤{
不透明度：0；
}
#续：悬停#清除{
不透明度：1；
}

你好
你好

在这里，您要求您的CSS转换在一个

url（）

值与另一个值之间进行转换。CSS引擎知道，这些只是字符串值，不能转换

你可以通过各种方式实现你想要的

其中一种方法是复制元素，将两个元素都绝对放置，并将每个过滤器应用到自己的元素上，然后转换两个元素的

不透明度

#清除、过滤{
位置：绝对位置；
排名：0；
左：0；
过渡：不透明度1s；
}
#过滤{
过滤器：url（#blurMe）；
}
#清楚的{
不透明度：0；
}
#续{
位置：相对位置；
}
#续：悬停#过滤{
不透明度：0；
}
#续：悬停#清除{
不透明度：1；
}

你好
你好

谢谢，我正在尝试不透明度技巧，它几乎可以工作了。我正在更新我的问题，也许你能帮上忙。@jrothafer我为堆叠版本添加了一个片段示例。谢谢。我设法使不透明工作。我想避免这个解决方案，但哦，好吧：）谢谢，我正在尝试不透明度技巧，它几乎可以工作了。我正在更新我的问题，也许你能帮上忙。@jrothafer我为堆叠版本添加了一个片段示例。谢谢。我设法使不透明工作。我想避免使用这个解决方案，但是哦：）如果你可以用CSS过滤器速记（乌贼色、色调旋转等）来表达你的过滤器，那么你可以转换它们。不能直接转换从CSS引用的SVG过滤器。如果可以用CSS过滤器速记（深褐色、色调旋转等）表示过滤器，则可以转换它们。不能直接转换从CSS引用的SVG过滤器。