经过大约 2 个小时的研究,我找不到问题的解决方案,我正在尝试继承背景的中心,因为“模糊框”会根据计算机分辨率而变大。
它看起来像这样(笔记本电脑分辨率): 我想让它显示背景图像的中心而不是 Angular 落。
* {
margin: 0;
padding: 0;
}
html {
width: 100vw;
height: 100vh;
}
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top;
background-image: url(https://images.unsplash.com/photo-1477346611705-65d1883cee1e?dpr=0.800000011920929&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=);
width: 100%;
height: 100%;
font-family: Arial, Helvetica;
letter-spacing: 0.02em;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
.blurred-box {
position: fixed;
width: 550px;
height: 670px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: inherit;
border-radius: 2px;
overflow: hidden;
}
.blurred-box:after {
content: '';
width: 1000px;
height: 1000px;
background: inherit;
position: absolute;
bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
}
.user-login-box {
position: relative;
margin-top: 50px;
text-align: center;
z-index: 1;
}
.user-login-box>* {
display: inline-block;
}
<div class="blurred-box">
<div class="user-login-box">
<h1>text here</h1>
</div>
</div>
如果有人发布解决方案,我希望有一个包含这些信息的文档链接(如果可以的话),谢谢。
最佳答案
你已经差不多好了,删除使用 translate()
,它会造成问题,并使用 margin:auto
居中你的元素:
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top;
background-image: url(https://images.unsplash.com/photo-1477346611705-65d1883cee1e?dpr=0.800000011920929&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=);
margin:0;
height: 100vh;
font-family: Arial, Helvetica;
letter-spacing: 0.02em;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
.blurred-box {
position: fixed;
width: 550px;
height: 670px;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
background: inherit;
border-radius: 2px;
overflow: hidden;
}
.blurred-box:after {
content: '';
width: 1000px;
height: 1000px;
background: inherit;
position: absolute;
bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
}
.user-login-box {
position: relative;
margin-top: 50px;
text-align: center;
z-index: 1;
}
.user-login-box>* {
display: inline-block;
}
<div class="blurred-box">
<div class="user-login-box">
<h1>text here</h1>
</div>
</div>
关于html - 如何继承某个位置(CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67491602/