Html 通过CSS在弹出模式后添加背景模糊
我正在寻找一个固定的模式,点击一个按钮就会弹出一个100%模糊的背景 我本以为它只是一个模糊过滤器,但它似乎只覆盖了屏幕的一小部分。我尝试添加100vh高度+宽度,并将位置设置为固定,顶部:0,左侧:0,但元素没有右对中 说得清楚一点——我希望模态背后的背景元素变得模糊,所以它后面的部分是聚焦的模态 以下是HTML(不确定有多重要,但无论如何都要发布):Html 通过CSS在弹出模式后添加背景模糊,html,css,Html,Css,我正在寻找一个固定的模式,点击一个按钮就会弹出一个100%模糊的背景 我本以为它只是一个模糊过滤器,但它似乎只覆盖了屏幕的一小部分。我尝试添加100vh高度+宽度,并将位置设置为固定,顶部:0,左侧:0,但元素没有右对中 说得清楚一点——我希望模态背后的背景元素变得模糊,所以它后面的部分是聚焦的模态 以下是HTML(不确定有多重要,但无论如何都要发布): 到目前为止,我只编写了这些代码,在将其余代码添加到中之前,我想先这样做。任何提示都很好。干杯 以下内容将使屏幕填充元素也增加模糊 .bg{
到目前为止,我只编写了这些代码,在将其余代码添加到中之前,我想先这样做。任何提示都很好。干杯 以下内容将使屏幕填充元素也增加模糊
.bg{
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(15px);
}
但是你的模特儿呢?你的问题不清楚,模态集中在屏幕中间。这就是模态和显示灵活性的要点,以对齐项目和对齐内容集为中心。模态部分覆盖整个视口,模态容器包含模态的实际内容。我希望模态部分模糊背景,但不透明度为0。我不能设置它。对不起,我想我解释错了-想象模态部分覆盖了整个视口。它后面的内容(即网页的其余部分)在它后面是可见的,就像它是透明的,但它是模糊的。模态容器集中在模态部分的中间死中心。这是完全可见的,而不是模糊的。
.blog-modal-section {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
filter: blur(8px);
-webkit-filter: blur(8px);
position: fixed;
top: 0;
left: 0;
z-index: 0;
}
.blog-modal-container {
height: 40%;
width: 40%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.bg{
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(15px);
}