同时使用多个CSS过滤器? [英] use multiple css filters at the same time?

问题描述

我正在尝试使用CSS过滤器.

I am experimenting with css filters.

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

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/

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

推荐答案

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

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

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

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.

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

CSS版本2

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

CSS version 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 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 version 3

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

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

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 transform and nested transforms will definitely break.

// 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渲染样式，则可以使用

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

• 很好的现代浏览器演示设置样式
• 现代的浏览器演示设置样式，没有尊重，请观察者进行修复

• 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

以及有关css-tricks的另一篇相关文章: Houdini

And another relevant article on css-tricks: Houdini

这篇关于同时使用多个CSS过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！