2016-05-23 48 views
0

所以我在我正在制作的网页上登录了一个模糊的图像div。将模糊滤镜应用于背景,不会保留我的div居中

这里是什么样子至今:

Problem..

现在,图像的模糊部分只应该是在与我的尺寸的页面的中间如图所示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)

+0

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

+0

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

回答

1

元素的位置是视口的fixedleft: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; 
} 
} 
+0

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

+0

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

+0

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