mehrere CSS-Filter gleichzeitig verwenden?

Ich experimentiere mit CSS-Filtern.

Und ich möchte die Unschärfe und die Graustufen gleichzeitig verwenden, aber ich kann nicht beide gleichzeitig auf demselben Bild verwenden?

Siehe Geige hier ...

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

Da es sich um eine Eigenschaft mit dem Namen handelt filter, überschreiben Sie sie jedes Mal, wenn Sie einen Stil hinzufügen möchten.

CSS Version 1

Glücklicherweise können Sie in einigen Eigenschaften wie Hintergrundbild und Filter mehrere Stile hinzufügen! Damit dies funktioniert, müssen Sie alle Filterstile in einer durch Leerzeichen getrennten Filtereigenschaft platzieren.

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

CSS Version 2

Eine alternative, flexible Lösung wäre, absichtlich eine "Div-Suppe" zu erstellen und verschiedene Filter im HTML-Stapel festzulegen. z.B

<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

edit : habe gerade gemerkt, dass ich diese Version gerade mit Transformationen geschrieben habe, aber die gleiche Idee gilt.

Eine weitere Lösung ist CSS vars. Ich würde nicht sagen, dass es ideal ist, aber es ist ein schönes Experiment. Der Hauptnachteil ist, dass Sie viele Variablen deklarieren müssen, standardmäßige lange Regeln für haben transformund verschachtelte Transformationen definitiv brechen.

// 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

Wenn Sie JavaScript zum Rendern der Stile verwenden, können Sie die aktuell angewendeten Filter mit getComputedStyle lesen und der Mischung weitere hinzufügen.

• Moderne Browser-Demo-Einstellungsstile schön
• Moderne Browser-Demo-Einstellungsstile ohne Respekt und korrigieren sie mit Beobachtern

Und ein relevanter Artikel - dies ist eher für Animationen gedacht und wird von vielen Browsern noch nicht unterstützt: Additive Animationen

Und noch ein relevanter Artikel über CSS-Tricks: Houdini

Ich versuche, Dienstprogrammklassen in Vanilla CSS zu erstellen, und dies wäre hilfreich, aber es sieht so aus, als ob dies nicht auf diese Weise möglich ist.

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

Ich bin mir nicht sicher, warum sie nicht einfach eine spezifischere Eigenschaft erstellt haben wie:

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

Nach einigen weiteren Arbeiten kam ich auf diese Lösung:

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