同时使用多个CSS过滤器?


78

我正在尝试使用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,刚刚对其进行了测试,现在它们都可以工作了。参见更新的小提琴。谢谢
joshmoto 2014年

您应该在自己的答案中写出来并接受该答案,而不是编辑您的问题。
勒内·

Answers:


123

因为它是一个名为的属性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并且嵌套转换肯定会中断。

Java脚本

最后,如果要使用JavaScript渲染样式,则可以使用getComputedStyle读取当前应用的过滤器,并添加更多内容。

和相关的文章-这是更多关于动画的,许多浏览器尚不支持:附加动画

另一篇有关CSS技巧的相关文章:Houdini


1
我想我已经解决了,谢谢。您的最高答案就是绝招
joshmoto 2014年

是的,我喜欢您的“也许将来”的建议,这很理想。
MSC

转换也同样很棒:)
yunzen

这个“也许将来”部分是否基于任何内容?它是否来自对规范的任何提议的补充?任何专有的实现?还是仅仅是无关紧要的一部分?
Jimbo Jonny

@JimboJonny自从我写了这个答案已经很久了,如果我没记错的话,我在一些csswg邮件列表中将其视为建议。但是,它可能最接近于“非相关的沉思”
勒内·

2

我正在尝试在普通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%;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.