同时使用多个css过滤器？

我正在试验css过滤器

我想同时使用模糊和灰度，但我似乎不能在同一张图像上同时使用这两种颜色

看这里的小提琴

---

因为它是一个名为

filter

的属性，所以每次要向其添加样式时，都会覆盖它

CSS版本1 幸运的是，您可以在一些属性（如背景图像和过滤器）中添加多种样式！ 要使其正常工作，必须将所有过滤器样式放在一个空格分隔的过滤器属性中

.grayscale.blur {
    filter: blur(5px) grayscale(1);
}

CSS版本2 另一种灵活的解决方案是创建一个“div-soup”，并在html堆栈中设置不同的过滤器。 e、 g

：根目录{
--规模：1；
--翻译：0px；
}
.盒子{
背景：蓝色；
宽度：20px；
高度：20px；
转换：
标度（var（--标度））
转换（var（--translate），var（--translate））；
转变：转变；
}
.box.translate{
--翻译：20px；
}
.盒子.秤{
--规模：3；
}

---

我正在尝试用香草CSS创建实用程序类，这会很有帮助，但看起来不能这样做

<img class="brightness-20 image-grayscale-100">
.brightness-20 {
    filter:brightness(20%);
}
.image-grayscale-100 {
    filter: grayscale(100%);
}

经过更多的工作，我想出了这个解决方案：

/*Initalize Variables No Adjustments*/
:root {
    --blur:0px;
    --contrast:100%;
    --brightness:100%;
    --contrast:100%;
    --dropshadow:0px 0px 0px black;
    --grayscale:0%;
    --hue-rotate:0deg;
    --invert:0%;
    --opacity:100%;
    --saturate:100%;
    --sepia:0%;
}
/*Apply Defult Variables To Image*/
.filter {
    filter: blur(var(--blur)) contrast(var(--contrast)) brightness(var(--brightness)) contrast(var(--contrast)) drop-shadow(var(--dropshadow)) grayscale(var(--grayscale)) hue-rotate(var(--hue-rotate)) invert(var(--invert)) opacity(var(--opacity)) saturate(var(--saturate)) sepia(var(--sepia)); 
}
/*Override Defults*/
.brightness-20 {
    --brightness:20%;
}
.image-grayscale-100 {
    --grayscale: 100%;
}

---

Doh，刚刚测试过，现在都能用了。见更新的小提琴。谢谢你应该写在你自己的答案中，接受这个答案，而不是编辑你的问题。我想我已经解决了，谢谢。你的首要答案很复杂，我喜欢你的“未来可能”建议，这很理想。同样，对于转换也很好：）这一“未来可能”部分是基于什么吗？它是否来自于对规范的任何建议添加？任何专有的实现？或者这只是一段无关的沉思？@JimboJonny我已经很久没有写过这个答案了，如果我没记错的话，我在csswg的邮件列表中将它视为一个建议。但它可能最接近于“无关的沉思”

<div class='demo__blurwrap' style='filter: blur(5px);'>
    <div class="demo__graywrap" style='filter: grayscale(1);'>
        <img src="awesome_image.jpeg" alt="">
    </div>
</div>

<img class="brightness-20 image-grayscale-100">
.brightness-20 {
    filter:brightness(20%);
}
.image-grayscale-100 {
    filter: grayscale(100%);
}

filter-brightness: 20%; filter-grayscale: 100%

/*Initalize Variables No Adjustments*/
:root {
    --blur:0px;
    --contrast:100%;
    --brightness:100%;
    --contrast:100%;
    --dropshadow:0px 0px 0px black;
    --grayscale:0%;
    --hue-rotate:0deg;
    --invert:0%;
    --opacity:100%;
    --saturate:100%;
    --sepia:0%;
}
/*Apply Defult Variables To Image*/
.filter {
    filter: blur(var(--blur)) contrast(var(--contrast)) brightness(var(--brightness)) contrast(var(--contrast)) drop-shadow(var(--dropshadow)) grayscale(var(--grayscale)) hue-rotate(var(--hue-rotate)) invert(var(--invert)) opacity(var(--opacity)) saturate(var(--saturate)) sepia(var(--sepia)); 
}
/*Override Defults*/
.brightness-20 {
    --brightness:20%;
}
.image-grayscale-100 {
    --grayscale: 100%;
}