l'utilisation de plusieurs filtres css en même temps?

Parce que c'est une propriété nommée filter, chaque fois que vous voulez ajouter du style à elle, vous le remplacer.

CSS version 1

Heureusement, vous pouvez ajouter plusieurs styles dans certaines propriétés comme image de fond d'écran et filtre de!
Pour obtenir ce travail, vous aurez à mettre toutes les filtre de styles dans un espace séparé de la propriété filter.

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

CSS version 2

Une alternative flexible, la solution serait de créer un "div " soupe" sur le but et le jeu de filtres différents dans le code html de la pile.
par exemple,

<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

modifier: viens de réaliser que je viens d'écrire cette version avec le transforme, mais la même idée s'applique.

Encore une autre solution est le CSS de vars. Je ne dirais pas que c'est l'idéal, mais c'est une belle expérience. L'inconvénient majeur est que vous devez déclarer un grand nombre de variables, par défaut longue règles pour transform et imbriquées transforme permettra de rompre définitivement.

JS:

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

CSS:

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

HTML:

<div 
  id='yes_this_works_and_one_of_many_reasons_ids_are_bad' 
  class='box scale translate'
></div>

Javascript

Enfin, si vous étiez à utiliser JavaScript pour rendre les styles que vous pouvez lire le courant appliqué des filtres à l'aide getComputedStyle et ajouter au mélange.

• Navigateur moderne de démonstration définition des styles bien
• Navigateur moderne de démonstration réglage de styles sans respect et la fixer avec les observateurs

Et d'un article pertinent - c'est plus pour les animations et pas encore pris en charge par de nombreux navigateurs: Additif animations

Et un autre article sur css-tricks: Houdini

Peut-être dans l'avenir.

Peut-être jamais filtres peuvent obtenir leurs propres propriétés pour surmonter le problème de ne pas être en mesure de combiner des filtres. Cela pourrait devenir quelque chose comme faire un longhand formulaire comme propriétés d'arrière-plan et du remplissage ont:

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