同时使用多个css过滤器？

Posted 2023-03-05

【中文标题】同时使用多个css过滤器？

【英文标题】：use multiple css filters at the same time?

【发布时间】：2015-02-09 20:03:16

【问题描述】：

我正在尝试使用 css 过滤器。

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

请看这里的小提琴...

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);

【问题讨论】：

Doh，刚刚测试了它，它们现在都可以工作了。请参阅更新的小提琴。谢谢

您应该在自己的答案中写下并接受该答案，而不是编辑您的问题。

【参考方案1】：

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

CSS 版本 1

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

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

CSS 版本 2

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

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

CSS 版本 3

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

另一个解决方案是 CSS vars。我不会说它是理想的，但它是一个很好的实验。主要的缺点是你需要声明很多变量，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 来呈现样式，您可以使用 getComputedStyle 读取当前应用的过滤器并添加更多内容。

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

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

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

【讨论】：

是的，我喜欢你的“也许在未来”的建议，这将是理想的。

同样的变换也会很棒:)

这个“也许在未来”的部分是基于任何东西吗？它是否来自规范的任何类型的提议添加？任何专有实现？还是只是一段无关紧要的沉思？

@JimboJonny 我已经很久没有写这个答案了，如果我没记错的话，我在一些 csswg 邮件列表中看到它是一个建议。但它可能最接近“不相关的思考”

为什么像transform 逗号分隔但filter 空格 分隔？混乱

【参考方案2】：

我正在尝试在 vanilla CSS 中创建实用程序类，这会有所帮助，但看起来不能以这种方式完成。

<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%;

【参考方案3】：

我正在使用这个。

/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);