Busco que los elementos html
que pasen detrás de un header
se muestren con efecto transparente-borroso cuando pasen detrás del header
.
Intenté usar el backdrop-filter: blur(5px);
, pero solo funciona el opacity
.
Lo que busco es algo así:
El fondo detrás se ve transparente pero a la vez borroso
Y lo único que me ha funcionado ha sido el opacity
, aquí el ejemplo:
Pero no se ve el efecto borroso
Este es el código que tengo para el header
:
.header {
padding: 5px 15px;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 99;
background: #ff4700;
border-radius: 0;
backdrop-filter: blur(5px);/*no hace efecto borroso*/
opacity: 0.90;
}
backdrop-filter: blur(5px)
? Así tendrías tu overlay con el opacity y un "blur transparente" detrás del div