5

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:

html,body{
            height: 100%;
            width: 100%;

        }
body{
  /* The image used */
  background-image: url(http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-832.jpg) ;
            /* Full height */
            height: 100%;
            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
-webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

        }
        .vdivide [class*='col-6']:not(:last-child):after {
            background: #e0e0e0;
            width: 1px;
            content: "";
            display:block;
            position: absolute;
            top:0;
            bottom: 0;
            right: 0;
            min-height: 70px;
        }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 
 <div class="container-fluid h-100 ">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="card col-8">
                <div class="card-body w-100 col">
                    <div class="row vdivide ">
                        <div class="col-6 ">
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
                        </div>
                        <div class="col-6">
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
                        </div>
                    </div>

                </div>
            </div>
    </div>

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.

2 respuestas 2

2

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:

html,body{
  height: 100%;
  width: 100%;

}
body{
  /* The image used */
  background-image: url(http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-832.jpg) ;
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

body::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);
}

.vdivide [class*='col-6']:not(:last-child):after {
    background: #e0e0e0;
    width: 1px;
    content: "";
    display:block;
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
    min-height: 70px;
}


        
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 
 <div class="container-fluid h-100 ">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="card col-8">
                <div class="card-body w-100 col">
                    <div class="row vdivide ">
                        <div class="col-6 ">
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
                        </div>
                        <div class="col-6">
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
                        </div>
                    </div>

                </div>
            </div>
    </div>

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

4
  • te aviso mañana si me resulta , vale? y si funciona te acepto la respuesta. Gracias por el tiempo. Commented el 18 abr. 2018 a las 2:29
  • Edgar , como es que interactua fondo-blur con los elementos ya que no lo veo asociado a nada.?. Commented el 18 abr. 2018 a las 13:25
  • Hola @SebastiánLagosYañez he añadido más información a mi respuesta para aclarar otras dudas (si es que las tenías) incluyendo la clase fondo-blue que use de ejemplo. Me avisas si aun te quedan dudas. Commented el 18 abr. 2018 a las 14:55
  • gracias por la respuesta , ahora me queda mas claro. Gracias! Commented el 18 abr. 2018 a las 15:05
2

Bueno buscando por ahí encontre la solución la dejo aca para que la vean a ver si les parece correcta , pero por el momento me sirve , solo quedaría ponerlo responsivo.

html,body{
            height: 100%;
            width: 100%;
        }
        .vdivide [class*='col-6']:not(:last-child):after {
            background: #e0e0e0;
            width: 1px;
            content: "";
            display:block;
            position: absolute;
            top:0;
            bottom: 0;
            right: 0;
            min-height: 70px;
        }

        .background-image {
             background-image: url(http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-832.jpg) ;
     
            background-size: cover;
            display: block;

            filter: blur(10px) contrast(30%);

            height: 100%;
            width: 100%;
            left: 0;
            position: fixed;
            right: 0;
            z-index: 1;
        }
        .content {
            left: 0;
            position: fixed;
            right: 0;
            z-index: 2;
        }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!---SE AGREGA ESTE DIV PARA EL FONDO---->
 <div class="background-image"></div>
 <!--------SE AGREGA LA CLASE CONTENT-------->
 <div class="container-fluid h-100  content">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="card col-8">
                <div class="card-body w-100 col">
                    <div class="row vdivide ">
                        <div class="col-6 ">
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
                        </div>
                        <div class="col-6">
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
                        </div>
                    </div>

                </div>
            </div>
    </div>

Cree dos clases background-image que es que se encarga de poner la imagen y hacer el efecto blur, y la clase content que se encarga de que el contenido quede donde esta centrado con las propiedades de bootstrap 4.

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.