0

在我的网站中，我制作了一个自定义登录页面，一切几乎都运行良好，但完整的页面背景图像。

背景图像显示得很好，但是如果您调整窗口大小以获得滚动条，您会在页面底部看到一个白条，在移动设备上您也会看到它。我将如何解决这个问题。

我已经尝试了所有我知道它应该很容易解决的方法，但我不明白为什么我不能修复它。

我已经测试过了，这些都行不通

html,body{margin:0;padding:0;height:100%}
body.login{margin:0;padding:0;height:100%}
*{margin:0;padding:0;}

解决方案

html {
    background: url('images/yourimage.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.images/body-bg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

body.login{background: transparent;}
4

2 回答 2

2

删除height:100%;您的html, body.

它导致主体不超过 100%（视口），因此视口之外的区域（在滚动时可见）不再具有背景，因为主体太小而无法填充屏幕的该区域。

于 2013-07-24T14:56:34.073 回答
0

我不得不将 body.login css 选择器更改为 html 并添加 body.login 背景：透明；

html {
        background: url('images/yourimage.jpg') no-repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.images/body-bg.jpg', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    }

    body.login{background: transparent;}
于 2013-07-25T10:24:02.710 回答