所以我在我制作的网页上有一个模糊的图像 div 用于我的登录。
到目前为止，这是它的样子:
现在，图像的模糊部分只应该在页面的中间，我的尺寸如下面的 SCSS 所示:
//Variables
$background_image: url(../img/bg.png);
$background_fallback: #C0C0C0;
body {
padding: 0; margin: 0;
background-image: $background_image;
background-position: 0px 0px;
background-repeat: repeat;
color: #333;
animation: bg 40s linear infinite;
min-height: 100%;
width: 100%;
}
.login_container {
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 40%;
height: 60%;
.login_container_bg {
position: fixed;
left: 0; right: 0; z-index: 1;
display: block;
background-image: $background_image;
width: 100%;
height: 100%;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
animation: bg 40s linear infinite;
}
.login_container_inner {
position: fixed;
left: 0; right: 0;
z-index: 2;
margin-left: 20px; margin-right: 20px;
}
}
@keyframes bg {
from { background-position: 0 0; }
to { background-position: 0 1000px; }
}
这是我使用的 HTML 结构:
<body>
<div class="login_container">
<div class="login_container_bg"></div>
<div class="login_container_inner">
Hello. It's me.
</div>
</div>
</body>
如您所见，背景的模糊部分扩展了页面的宽度。我希望模糊位仅是内部的宽度和高度 - 应该是页面的 50% 和 50% (x, y)
最佳答案
元素的位置固定到视口(viewport)的left:0，而不是容器。 - 固定 元素相对于浏览器窗口定位 http://www.w3schools.com/cssref/pr_class_position.asp
将其更改为绝对定位(相对于容器)或将其定位为相对于视口(viewport)固定。
编辑:尝试这样的事情。
HTML
<div class="login_container_bg">
<div class="login_container_inner">
Hello. It's me.
</div>
</div>
CSS
.login_container {
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: $background_image;
.login_container_bg {
position: absolute;
left: 50%;
top: 50%;
transform:translateX(-50%) translateY(-50%);
z-index: 1;
display: block;
width: 40%;
height: 60%;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
animation: bg 40s linear infinite;
}
.login_container_inner {
position: absolute;
left: 0; right: 0;
z-index: 2;
margin-left: 20px; margin-right: 20px;
}
}
关于html - 将模糊滤镜应用于背景，不会使我的 div 居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37387650/