同时使用多个css过滤器？

Question

我正在尝试使用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);
}

Answer 1

因为它是一个名为的属性filter,所以每次要为其添加样式时都会覆盖它.

CSS版本1

幸运的是,你可以在一些属性中添加多个样式,如background-image和filter!为了实现这一点,您必须将所有过滤器样式放在一个空格分隔的过滤器属性中.

.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" alt="">
    </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读取当前应用的过滤器,并添加更多内容.

• 现代浏览器演示设置风格很好
• 现代浏览器演示设置样式无需尊重并使用观察者进行修复

还有一篇相关的文章 - 这更适用于动画,但尚未得到许多浏览器的支持:添加动画

另一篇关于css-trick的相关文章:Houdini

或许在将来

也许过滤器可能会获得自己的属性来克服无法组合过滤器的问题.这可能会变成类似于像背景和填充这样的属性的缩写形式:

// NON STANDARD, will not work
.grayscale {
    filter-grayscale: 1;
}
.blur {
    filter-blur: 5px;
}

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

Answer 3

由于到目前为止的答案似乎缺少这一点，并且仅在评论中提到，因此以下是有效的：

只需将多个以空格分隔的过滤器组合起来即可，例如：

filter: grayscale() blur(5px);

另请参阅此处。