将 CSS 'blur()' 滤镜应用于已应用 'brightness()' 滤镜的图像会停用后者答案

【问题标题】：Applying CSS 'blur()' filter to an image with already applied 'brightness()' filter deactivates the latter将 CSS 'blur()' 滤镜应用于已应用 'brightness()' 滤镜的图像会停用后者
【发布时间】：2014-12-27 17:02:05
【问题描述】：

我得到了一张已经将其调暗到 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 行来在悬停事件时将这个模糊类添加到我的图像中，但是，一旦发生模糊效果，它就会立即移除现有的亮度。我知道允许使用多个过滤器，那么这里的诀窍在哪里？

【问题讨论】：

标签： css css-filters

【解决方案1】：

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

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

所以在JS 中你还需要包含brightness

【讨论】：

谢谢维托里诺！实际上，我的错误是我尝试使用多个过滤器，用逗号分隔它们，这就是为什么它从来没有奏效！