将模糊滤镜应用于背景，不会保留我的div居中

所以我在我正在制作的网页上登录了一个模糊的图像div。将模糊滤镜应用于背景，不会保留我的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结构I中：

<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）

来源

2016-05-23 madcrazydrumma

你.login_container_inner已经居中。请详细说明您的期望。 –

@SebastianWiteczek正如你所看到的，背景的模糊部分会扩展页面的宽度。我想要模糊位只是内部的宽度和高度 - 这应该是页面 – madcrazydrumma

元素的位置是视口的fixed到left:0，而不是集装箱。 - 相对于浏览器窗口http://www.w3schools.com/cssref/pr_class_position.asp

要么改变它固定元件被定位为绝对（相对于容器）或位置它固定相对于视定位。

编辑：尝试这样的事情。

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; } }

来源

2016-05-23 15:07:23

Gavin的50％和50％（x，y），当我将相对定位应用于bg和内部元素时，它们会显示一个另一个ontop。 http://i.imgur.com/4ctRRMk.png – madcrazydrumma

我想你误解了我的答案。 –

哦，所以你打算将绝对定位应用于内部元素以及顶层元素？好的，这是完美的！干杯 – madcrazydrumma

将模糊滤镜应用于背景，不会保留我的div居中

回答

相关问题