Al final probé usando la librería
html2canvas, que es lo que usa el tipo en el enlace anterior.
Básicamente es para generar una captura de pantalla en un
canvas. Luego eso se pone como fondo del elemento.
Código Javascript
:
Ver originalhtml2canvas document.body,
onrendered: (canvas) ->
fondo = canvas.toDataURL("image/jpg").toString()
$("#blur").css backgroundImage: "url("+fondo+")"
Después se aplican los filtros sobre ese elemento:
Código CSS:
Ver originaldiv#blur {
-webkit-filter: blur(20px);
}
Y ya con eso, puedes poner otro elemento encima y ponerle un color de fondo, por ejemplo un
rgba(255,255,255,.2) y ajustar lo que haga falta. Lo del elemento encima tiene que ser porque el filtro se hereda y no hay forma de quitarlo —pasa como con
opacity. Pero bueno, después de todo el truco de magia eso es lo de menos.
Obviamente solo funciona en WebKit, y Chrome, que ya no es WebKit pero si lo es (?). Creo que, se podría cambiar el uso de filtros y usar en su lugar un SVG que tenía algo así como efectos borrosos, y conseguir una mayor compatibilidad.