英文:
Backdrop blurred div is not covering entire screen
问题
我有一个叫做overlay
的div,然后有一个叫做signupContainer
的容器。我想让overlay
div覆盖整个屏幕,但在背景中进行模糊处理。这是我的代码:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html, body {
background-image: url('https://host.stcollier.repl.co/img.png');
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 1000px;
background-color: rgba(255, 255, 255, 0.5);
}
.blur {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
z-index: -99;
backdrop-filter: blur(10px);
position: fixed;
top: 0;
left: 0;
}
.signupContainer {
padding-top: 75px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
z-index: 99;
color: white;
}
<!-- language: lang-html -->
<div class="blur"></div>
<div class="signupContainer">
<h1>Sign Up</h1>
</div>
<!-- end snippet -->
请注意,背景滤镜模糊效果未覆盖整个屏幕,而只到其他元素的位置。这是为什么,如何修复这个问题?
英文:
I have a div called overlay
and then a container called signupContainer
. I want the overlay div to cover the entire screen but be blurred in the background. This is my code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html, body {
background-image: url('https://host.stcollier.repl.co/img.png');
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 1000px;
background-color: rgba(255, 255, 255 0.5);
}
.blur {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
z-index: -99;
backdrop-filter: blur(10px);
position: fixed;
top: 0;
left: 0;
}
.signupContainer {
padding-top: 75px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
z-index: 99;
color: white;
}
<!-- language: lang-html -->
<div class="blur"></div>
<div class="signupContainer">
<h1>Sign Up</h1>
</div>
<!-- end snippet -->
Here's how that looks:
Notice how the backdrop filter blur is not covering the entire screen, but only the point to where other element is. Why is this and how can I fix this?
答案1
得分: 2
只需从第一个规则中删除HTML选择器,然后它就会起作用。您不必要地应用了两个背景图像,似乎这导致了错误的渲染。
body {
background-image: url('https://host.stcollier.repl.co/img.png');
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 1000px;
background-color: rgba(255, 255, 255, 0.5);
}
英文:
Just remove the html selector from the first rule, and then it will work. You're applying two background images unnecessarily and it seems that this is causing a wrong rendering.
body {
background-image: url('https://host.stcollier.repl.co/img.png');
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 1000px;
background-color: rgba(255, 255, 255 0.5);
}
答案2
得分: 1
因为背景位置是相对的,所以它没有覆盖整个页面。
你可以使用这个代码:
.blur {
position: absolute;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
z-index: -99;
backdrop-filter: blur(10px);
position: fixed;
top: 0;
left: 0;
}
英文:
It's because the backdrop position is relative so it's not covering the entire page.
you could use this:
.blur {
position: absolute;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
z-index: -99;
backdrop-filter: blur(10px);
position: fixed;
top: 0;
left: 0;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论