沒有滾動條的可調整大小的背景圖片

我正在嘗試製作一個靜態頁面，您將無法在全屏時滾動。我只想讓我的表單居中，背景圖像隨窗口大小而改變。如果這真的很明顯，我是一個初學者很抱歉。沒有滾動條的可調整大小的背景圖片

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    /* center horizontally */ 
 
    align-items: center; 
 
    /* center vertically */ 
 
} 
 
.trans { 
 
    background: rgba(1, 1, 1, 0.6); 
 
} 
 
body { 
 
    height: 100%; 
 
} 
 
.height { 
 
    height: 100% 
 
} 
 
html { 
 
    height: 100%; 
 
    background: url(wallpaper.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<div class="container height"> 
 
    <form id="form"> 
 
    <input class="trans text" type="password" name="Password"> 
 
    <button type="submit">Submit</button> 
 
    </form> 
 
</div>

來源

2016-09-27 Bilbo Baggins

不要忘了復位機構的預設保證金http://stackoverflow.com/questions/13127887/html-default-body-margin – DaniP

你的CSS是正確的。

只是一直由正在重置一些CSS屬性開始建立一個網站：

* { 
    margin: 0px; 
    padding: 0px; 
    max-width: 100%; 
    box-sizing: border-box; 
    -webkit-font-smoothing: subpixel-antialiased; 
}

或者使用Normalize.css

爲什麼？因爲每個瀏覽器都提供它自己的默認CSS，所以我們需要添加我們的。

這將幫助你很多在未來:)

來源

2016-09-27 22:21:16 Quanta

哦哇這是它的技巧，謝謝你的提示 –

此規則

html { 

    height: 100%; 
    background: url(wallpaper.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

}

必須適用於body標籤來代替：

body { 
    height: 100%; 
    background: url(wallpaper.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

}

來源

2016-09-27 21:52:06 Johannes

這沒有工作，它具有相同的效果 –

沒有滾動條的可調整大小的背景圖片

回答

相關問題