html - 如何在 div 上固定和居中图像

Question

我想将我的背景图像固定在容器的中心，这样当我滚动或放大时，我的图像不会重新缩放或剪切。另外，我怎样才能使我的登录 div 居中而不出现任何问题？当我将 margin: 100px auto 添加到它时，它使我的页面可以滚动，当我滚动和缩放我的页面时，边距会遮挡图像的某些部分。有什么想法吗？

HTML:

<div id="container">
    <div class="login">
    </div>  
</div>

CSS:

body, html {
    margin:0;
    padding:0;
}

#container {
    width:100%;
    height:100%;
    background: url(images/bg-admin.png) no-repeat center center fixed;
}

.login {
    margin:100px auto;
    width:400px;
    padding:1em;
    background:white;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 0px 0px 10px 6px #ccc;
    -webkit-box-shadow: 0px 0px 10px 6px #ccc;
    box-shadow: 0px 0px 10px 0px #ccc;
}

Answer 1

对于部分答案表示歉意，但对于固定背景，您可以使用 background-attachment 属性并为其指定值 fixed。