將模糊濾鏡應用於背景，不會保留我的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居中

回答

相關問題