Использовать несколько фильтров css одновременно?

Я экспериментирую с фильтрами 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);
}

Любая помощь будет большой благодарностью.

Ответ 1

Поскольку это одно свойство с именем filter, каждый раз, когда вы хотите добавить к нему стиль, вы переопределяете его. К счастью, вы можете добавить несколько стилей в некоторые свойства, такие как фоновое изображение и фильтр! Чтобы получить эту работу, вам придется поместить все стили фильтра в одно свойство фильтра, разделенного пробелом.

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

Альтернативным, гибким решением было бы создать "суп-суп" специально и установить различные фильтры в стеке 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>

Наконец, если вы хотите использовать JavaScript для визуализации стилей, вы можете прочитать текущие применяемые фильтры, используя getComputedStyle и добавить больше к смесь.

Я не знаю его статуса, но если я правильно помню, предлагается добавить все фильтры в качестве собственных свойств, чтобы решить проблему невозможности комбинирования фильтров. Это может стать чем-то вроде создания длинной формы, аналогичной свойствам фона и дополнений:

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