¿Como poner una imagen de fondo con bootstrap 4 con efecto blur?

publicado por: Anonymous

Hola resulta que tengo el siguiente código que pone una imagen detrás con boostrap 4, pero no se como ponerle un efecto blur sin que afecte al contenido como lo muestra este código:

_x000D_

_x000D_

html,body{_x000D_
            height: 100%;_x000D_
            width: 100%;_x000D_
_x000D_
        }_x000D_
body{_x000D_
  /* The image used */_x000D_
  background-image: url(http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-832.jpg) ;_x000D_
            /* Full height */_x000D_
            height: 100%;_x000D_
            /* Center and scale the image nicely */_x000D_
            background-position: center;_x000D_
            background-repeat: no-repeat;_x000D_
            background-size: cover;_x000D_
-webkit-filter: blur(5px);_x000D_
  -moz-filter: blur(5px);_x000D_
  -o-filter: blur(5px);_x000D_
  -ms-filter: blur(5px);_x000D_
  filter: blur(5px);_x000D_
_x000D_
        }_x000D_
        .vdivide [class*='col-6']:not(:last-child):after {_x000D_
            background: #e0e0e0;_x000D_
            width: 1px;_x000D_
            content: "";_x000D_
            display:block;_x000D_
            position: absolute;_x000D_
            top:0;_x000D_
            bottom: 0;_x000D_
            right: 0;_x000D_
            min-height: 70px;_x000D_
        }

_x000D_

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">_x000D_
_x000D_
 _x000D_
 <div class="container-fluid h-100 ">_x000D_
        <div class="row h-100 justify-content-center align-items-center">_x000D_
            <div class="card col-8">_x000D_
                <div class="card-body w-100 col">_x000D_
                    <div class="row vdivide ">_x000D_
                        <div class="col-6 ">_x000D_
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">_x000D_
                        </div>_x000D_
                        <div class="col-6">_x000D_
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">_x000D_
                        </div>_x000D_
                    </div>_x000D_
_x000D_
                </div>_x000D_
            </div>_x000D_
    </div>

_x000D_

_x000D_

_x000D_

Entonces no se como puedo hacer para que quede bien, ¿Existe alguna propiedad para bootstrap o se maneja con css3? . Si me pudieran ayudar sería de mucha ayuda.Gracias.

solución

Hay una forma muy sencilla de lograrlo, solo tienes que añadir un pseudo elemento, a la etiqueta que tenga el fondo que quieras desenfocar. Yo te recomiendo usar por ejemplo una clase, llamada “fondo-blur” (o la que desees) así:

<body class="fondo-blur">

Y en el css, basta con que agregues.

.fondo-blur{
  position: relative;
  overflow: hidden;
}

.fondo-blur::before{
  content: '';
  display: block;
  background: inherit;
  position: absolute;
  width: 100%; height: 100%;
  left: 0; top: 0;
  filter: blur(15px);
  transform: scale(1.2,1.4);
}

En este caso fondo-blur es una clase para aplicar directamente a cualquier elemento que tenga una imagen de background y quieras que tenga el efecto de “blur” o desenfoque. Para más detalle cada propiedad hace lo siguiente:

  • Con background: inherit heredará todas las propiedades que le asignes al padre como: background-image, background-size, background-color, background-position, etc, puedes volverlas a escribir, pero es opcional.
  • Como el desenfoque causa que los bordes también se vuelvan difusos, te recomiendo usar transform: scale() para que se agrande un poco más que el elemento contenedor y añadiendo overflow: hidden, ocultamos todo lo que sobresalga del padre, en tu caso la etiqueta <body>.
  • Las demás propiedades (position, left, width, etc) son para que ocupe todo el tamaño del padre.

En tu caso, el elemento contenedor es el mismo body, por lo que agregare simplemente estas mismas propiedades a tu etiqueta directamente en el css, un ejemplo:

_x000D_

_x000D_

html,body{_x000D_
  height: 100%;_x000D_
  width: 100%;_x000D_
_x000D_
}_x000D_
body{_x000D_
  /* The image used */_x000D_
  background-image: url(http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-832.jpg) ;_x000D_
  /* Full height */_x000D_
  height: 100%;_x000D_
  /* Center and scale the image nicely */_x000D_
  background-position: center;_x000D_
  background-repeat: no-repeat;_x000D_
  background-size: cover;_x000D_
  position: relative;_x000D_
  overflow: hidden;_x000D_
}_x000D_
_x000D_
body::before{_x000D_
  content: '';_x000D_
  display: block;_x000D_
  background: inherit;_x000D_
  position: absolute;_x000D_
  width: 100%; height: 100%;_x000D_
  left: 0; top: 0;_x000D_
  filter: blur(15px);_x000D_
  transform: scale(1.2,1.4);_x000D_
}_x000D_
_x000D_
.vdivide [class*='col-6']:not(:last-child):after {_x000D_
    background: #e0e0e0;_x000D_
    width: 1px;_x000D_
    content: "";_x000D_
    display:block;_x000D_
    position: absolute;_x000D_
    top:0;_x000D_
    bottom: 0;_x000D_
    right: 0;_x000D_
    min-height: 70px;_x000D_
}_x000D_
_x000D_
_x000D_
        

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">_x000D_
_x000D_
 _x000D_
 <div class="container-fluid h-100 ">_x000D_
        <div class="row h-100 justify-content-center align-items-center">_x000D_
            <div class="card col-8">_x000D_
                <div class="card-body w-100 col">_x000D_
                    <div class="row vdivide ">_x000D_
                        <div class="col-6 ">_x000D_
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">_x000D_
                        </div>_x000D_
                        <div class="col-6">_x000D_
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">_x000D_
                        </div>_x000D_
                    </div>_x000D_
_x000D_
                </div>_x000D_
            </div>_x000D_
    </div>

_x000D_

_x000D_

_x000D_

Puedes hacerlo así o de la forma que te comenté al principio.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *