Cuando se usan los filtros webkit “desenfoque” e “invertir”, solo funciona el desenfoque. Y si se elimina “desenfoque”, “invertir” funciona.
Además, solo Chrome y Opera están respondiendo al código.
¿Hay alguna manera de hacer que esto funcione para las versiones recientes de IE y 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); } Puede usar el elemento foreignObject svg para importar el contenido de todo el body en un elemento svg y luego aplicar los filter s en el foreignObject que aplicará los filter en todo el body .
Soporte de navegador para filtros svg vs filtros CSS .
html, body { width: 100%; height: 100%; background: #222222; margin: 0; }