我在一些页面中看到,当打开模态框时,背景会出现模糊效果,我认为这种效果改善了这些页面的外观,我正在寻找的是不仅背景模糊,而且所有元素都模糊了显示在页面中。我该怎么做?
这是当前代码:
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>
我希望它看起来像这样:
欢迎任何帮助。
如果我们使用 Bootstrap 库,只需应用以下 CSS
根据过滤器文档,中的值
px
是可选的。blur
将此过滤器应用于背景或
background-image
我建议将其视为容器,body
如果 aheight
y设置为 100%,它又可以采用全尺寸(使用视口widht
也可能更实用单位)。对于我将它分配给 Bootstrap 类的示例
.container-fluid
,但它的工作原理与从容器中添加任何元素相同。确实,要实现您正在寻找的模糊,有必要使用
blur
此过滤器;顾名思义,它允许我们模糊 HTML 元素、图像、文本、容器等。为了能够使用它,只需输入以下代码行:
考虑到 的像素
filter: blur(5px)
,它的像素越小,模糊就会越大。希望对您有所帮助!
调查我发现使背景模糊
blur
并被使用saturate
:激活效果
并禁用它
结果如下所示:
我不知道这是否是唯一的选择,也许还有其他选择。
希望对需要的人有所帮助,问候。