1

Tengo una imagen para un fondo del body en mi sitio y quiero aplicar un poco de desenfoque, resulta que cuando aplico la propiedad blur me desenfoca todos los div y mis container, pero no el body.

body{
    background-image: url("ruta");
    filter: blur(6px);
}
<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Logo</h1>
            </div>
        </div>
    </div>
</body>

También probé agregando con un class en css, pero no me funciona.

.fondo-body{
    background-image: url("ruta");
    filter: blur(6px);
}
<body class="fondo-body">
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Logo</h1>
            </div>
        </div>
    </div>
</body>

2 respuestas 2

2

Puedes probar colocandolo en la pseudo :before del body, quedando así:

body:before {
  filter: blur(2px);
  content: "";
  position: absolute;
  height: 20%; 
  width: 20%;
  background: url(http://lorempixel.com/420/255);
  background-size: cover;
  z-index: -1;
  -webkit-transform: scale(5);
  -webkit-transform-origin: top left;
}

.container{
  z-index:99999;
}
<body>
  <div class="container">
    <div class="row">
      <div class="col">
        <h1>Logo</h1>
      </div>
    </div>
  </div>
</body>

Espero te sirva.

0

Si deseas algo más simple, puedes usar la propiedad backdrop-filter a tu CSS:

body{
    background-image: url("ruta");
    backdrop-filter: blur(6px);
}

Aquí esta la documentación si gustas: https://developer.mozilla.org/es/docs/Web/CSS/backdrop-filter

1
  • Nota: Esto requiere el prefijo -webkit- para Safari.
    – Alfabravo
    Commented el 26 ene. 2021 a las 18:13

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.