I have seen in some pages that when opening a modal the background appears with a blur effect, I think that this effect improves the appearance of those pages, what I am looking for is that not only the background is blurred, but all the elements that are shown in the page. how could i do it?
This is the current code:
body {
padding-bottom: 20px;
background-image: url(https://blog.hubspot.es/hubfs/fondos-para-paginas-web.jpg);
background-size: cover;
}
.navbar {
margin-bottom: 20px;
}
.contenedor {
margin:50px 20px 0;
padding:20px;
position:relative;
}
.card{
opacity: 0.8 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="contenedor" >
<div class="row">
<div class="col-md-12">
<div class="card mr-5 ml-5 ">
<div class="card-shadow mr-5 ml-5 mt-5">
<h2>Título de la Pagina</h2>
<hr>
</div>
<div class="card-body mr-5 ml-5 mb-5">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Mostrar Modal
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" data-backdrop="true" data-keyboard="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Título del Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Cuerpo del Modal</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Aceptar</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I would like it to look like this:
Any help is welcome.
If we work with the Bootstrap library, just apply the following CSS
The value in
px
is optional, according to the filterblur
documentation .For this filter to be applied to the background or
background-image
what I propose is that it be treated as a container, which in turn can take the full size of thebody
if aheight
y is setwidht
to 100% (it may also be more practical to use viewport units ).For the example I assigned it to the Bootstrap class
.container-fluid
, but it works just the same adding any element from a container.Indeed, to achieve the blur you are looking for, it is necessary to use
blur
this filter; As its name indicates, it allows us to blur our HTML elements, Images, text, containers, among others.To be able to use it, simply put the following line of code:
Taking into account that the pixels of
filter: blur(5px)
, the smaller its pixels, the greater the blur will be.Hope it has been helpful!
Investigating I found that to make the background blur
blur
and are usedsaturate
:To activate the effect
and to disable it
The result looks like this:
I don't know if it's the only option, maybe there are other alternatives.
I hope it serves those who need it, greetings.