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