CSS 同时使用多个css过滤器？

use multiple css filters at the same time?

提问by joshmoto

I am experimenting with css filters.

我正在试验 css 过滤器。

And I would like use the blur and grayscale at the same time, but I can't seem to use both simultaneously on the same image?

我想同时使用模糊和灰度，但我似乎无法在同一图像上同时使用两者？

See fiddle here...

在这里看到小提琴......

http://jsfiddle.net/joshmoto/fw0m9fzu/1/

http://jsfiddle.net/joshmoto/fw0m9fzu/1/

.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

.grayscale {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}

.blur-grayscale {
    filter: blur(5px) grayscale(1);
    -webkit-filter: blur(5px) grayscale(1);
    -moz-filter: blur(5px) grayscale(1);
    -o-filter: blur(5px) grayscale(1);
    -ms-filter: blur(5px) grayscale(1);
}

回答by René

Because it's one property named filter, every time you want to add a style to it you override it.

因为它是一个名为 的属性filter，所以每次您想向其添加样式时，您都会覆盖它。

CSS version 1

CSS 版本 1

Fortunately you can add multiple styles in some properties like background-image and filter! To get this working you'll have to put all the filter styles in one space separated filter property.

幸运的是，您可以在一些属性中添加多种样式，例如 background-image 和 filter！要使其正常工作，您必须将所有过滤器样式放在一个以空格分隔的过滤器属性中。

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

CSS version 2

CSS 版本 2

An alternative, flexible, solution would be to create a "div soup" on purpose and set different filters in the html stack. e.g.

另一种灵活的解决方案是故意创建“div 汤”并在 html 堆栈中设置不同的过滤器。例如

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

CSS version 3

CSS 版本 3

edit: just realised I just wrote this version with transforms, but the same idea applies.

编辑：刚刚意识到我只是用转换编写了这个版本，但同样的想法也适用。

Yet another solution is CSS vars. I wouldn't say it's ideal but it's a nice experiment. The major downside is that you need to declare a lot of variables, have default long rules for transformand nested transforms will definitely break.

另一个解决方案是 CSS 变量。我不会说这是理想的，但这是一个不错的实验。主要的缺点是你需要声明很多变量，有默认的长规则transform，嵌套转换肯定会破坏。

// Added just for fun
setInterval(() => {
  yes_this_works_and_one_of_many_reasons_ids_are_bad.classList.toggle('translate');
}, 1000);
setInterval(() => {
  yes_this_works_and_one_of_many_reasons_ids_are_bad.classList.toggle('scale');
}, 1500);

:root {
  --scale: 1;
  --translate: 0px;
}
.box {
  background: blue;
  width: 20px;
  height: 20px;
  transform: 
    scale(var(--scale))
    translate(var(--translate), var(--translate));
  transition: transform .3s;
}
.box.translate {
  --translate: 20px;
}
.box.scale {
  --scale: 3;
}

<div 
  id='yes_this_works_and_one_of_many_reasons_ids_are_bad' 
  class='box scale translate'
></div>

Javascript

Javascript

Lastly, if you were to use JavaScript to render the styles you can read the current applied filters using getComputedStyleand add more to the mix.

最后，如果您要使用 JavaScript 来呈现样式，您可以使用getComputedStyle读取当前应用的过滤器并添加更多样式。

• Modern browser demo setting styles nicely
• Modern browser demo setting styles without respect and fix it with observers

• 现代浏览器演示设置样式很好
• 不尊重现代浏览器演示设置样式并使用观察者修复它

And a relevant article - this is more for animations and not yet supported by many browsers: Additive animations

还有一篇相关的文章 - 这更多是针对动画的，但许多浏览器尚不支持：Additive animations

And another relevant article on css-tricks: Houdini

还有另一篇关于 css-tricks 的相关文章：Houdini

回答by Billy Mitchell

I'm trying to create utility classes in vanilla CSS and this would be helpful but it looks like it can not be done this way.

我正在尝试在 vanilla CSS 中创建实用程序类，这会很有帮助，但它看起来无法通过这种方式完成。

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

I'm not sure why they didn't just create a more specific property like:

我不确定他们为什么不只是创建一个更具体的属性，例如：

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

After some more work I came up with this solution:

经过一些工作，我想出了这个解决方案：

/*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%;
}