Question

在我的网站上，我创建了一个自定义登录页面，一切都很好，但整页背景图片。

背景图片显示正常但是如果你调整窗口大小，你会得到滚动条，你会在页面底部找到一个白色条形图，而在移动设备上你也可以得到它。我该如何解决这个问题。

我已经尝试了所有我知道它应该是一个简单的修复，但我不明白为什么我无法解决它。

我已经过测试，那些将无效

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;}

Answer 1

删除height:100%;上的html, body声明。

导致身体不超过100％（视口），因此视口外部的区域（滚动时可见）不再具有背景，因为身体太小而无法填充屏幕的那个区域。 / p>

Answer 2

我不得不将body.login css选择器更改为html并添加body.login background：transparent;

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;}

整页背景奇怪切断

2 个答案: