0

Busco que los elementos html que pasen detrás de un headerse 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

introducir la descripción de la imagen aquí

Y lo único que me ha funcionado ha sido el opacity, aquí el ejemplo:

Pero no se ve el efecto borroso

introducir la descripción de la imagen aquí

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;
}
1
  • ¿Y si colocas tu header dentro un div que tenga el backdrop-filter: blur(5px)? Así tendrías tu overlay con el opacity y un "blur transparente" detrás del div
    – FranAcuna
    Commented el 25 jun. 2021 a las 22:03

1 respuesta 1

1

Añade esta línea a tu clase .header, creo que es lo que te falta.

background-color: rgba(255, 255, 255, 0.5);

Te paso también un ejemplo para que lo puedas revisar. Fuente: https://css-tricks.com/almanac/properties/b/backdrop-filter/#browser-support

body {
  background-image: url('https://41.media.tumblr.com/efd15be8d41b12a7b0ef17fba27c3e20/tumblr_mqqy59HMaf1qzattso1_1280.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);  
}
<div class="container">
      <div class="modal">
        <p>The background image should be pleasantly blurred under this box, <a href="https://i.imgur.com/z7s7uf6.png">like so</a>.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, quae distinctio magnam, laborum iusto itaque autem! Molestiae enim distinctio molestias, dolores ea quasi magni nisi aspernatur magnam, voluptate eum fuga.</p>
      </div>
    </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.