将CSS'blur（）'滤镜应用于已应用'brightness（）'过滤器的图像会停用后者

Question

我得到的图像已经将它变暗到50％：

.f_pixx {
width: 100%;
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
}

我也有一些小课，目的只是模糊：

.blurrme {
-webkit-filter: blur(3px);
 filter: blur(3px);
}

因此，我编写了一个简单的JS线来在悬停事件中将此模糊类添加到我的图像中，但是，只要模糊效果发生，它就会立即删除现有的亮度。我知道允许使用多个过滤器，所以这里的诀窍是什么？

Answer 1

-webkit-filter: brightness(50%) blur(3px);
filter: brightness(50%) blur(3px);

替换class将删除之前的属性，并将应用新属性

因此，在JS中，您还需要包含brightness