CSS: Размытие и инвертирование цветов для всей страницы

При использовании обоих фильтров webkit «размытие» и «инверсия» работает только размытие. А если "размытие" убрать, "инвертировать" работает.

Также на код реагируют только Chrome и Opera.

Есть ли способ заставить это работать для последних версий IE и Firefox?

body {
-webkit-filter: invert(100%);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}

html blur css document-body css-filters
person Gabriel Meono    schedule 23.12.2014    source источник
comment
Вам нужен svg фильтр для максимальной поддержки браузера. Этот ответ должен помочь ---› stackoverflow.com/questions/27583937/   -  person Weafs.py    schedule 23.12.2014
comment
Я напишу ответ с фильтром invert.   -  person Weafs.py    schedule 23.12.2014
comment
Спасибо ЧипШоколад!   -  person Gabriel Meono    schedule 23.12.2014
comment
просто соедините их вместе -webkit-filter: blur(5px) invert(100%);   -  person jaakkoj    schedule 23.12.2014

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете использовать элемент foreignObject svg, чтобы импортировать весь контент body в элемент svg, а затем применить filters к foreignObject, который применит filters ко всему body.

Поддержка браузером svg фильтров по сравнению с CSS-фильтры.

Демонстрация на CodePen

html, body {
  width: 100%;
  height: 100%;
  background: #222222;
  margin: 0;
}
<body>
  <svg width="100%" height="100%" style="position: absolute; left:0;top: 0;">
    <defs>
      <filter id="blur-and-invert">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        <feColorMatrix type="saturate" values="1" result="fbSourceGraphic" />
        <feColorMatrix in="fbSourceGraphic" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 " />
      </filter>
    </defs>
    <foreignObject width="100%" height="100%" filter="url(#blur-and-invert)">
      <!-- Here goes the content -->
      <img src="http://lorempixel.com/450/300/sports" width="100%" height="100%" />
    </foreignObject>
  </svg>
</body>

Если вы хотите применить filter к событию, вы можете сначала удалить атрибут filter из элемента foreignObject и таким образом применить filter с помощью JavaScript.

var body = document.getElementsByTagName('foreignObject')[0];

body.setAttribute('filter', 'url(#blur-and-invert)')


var body = document.getElementsByTagName('foreignObject')[0];

body.setAttribute('filter', 'url(#blur-and-invert)')
html, body {
  width: 100%;
  height: 100%;
  background: #222222;
  margin: 0;
}
<body>
  <svg width="100%" height="100%" style="position: absolute; left:0;top: 0;">
    <defs>
      <filter id="blur-and-invert">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        <feColorMatrix type="saturate" values="1" result="fbSourceGraphic" />
        <feColorMatrix in="fbSourceGraphic" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 " />
      </filter>
    </defs>
    <foreignObject width="100%" height="100%">
      <img src="http://lorempixel.com/450/300/sports" width="100%" height="100%" />
    </foreignObject>
  </svg>
</body>

person Weafs.py    schedule 23.12.2014