css3 background-size:覆盖在调整大小时留出空白 [英] css3 background-size:cover leaving white space on resize

问题描述

body {
    margin:0;
    padding:0;
    position:relative;
    background:url(../images/imgs/backgrnd.png) no-repeat;
    background-size:cover;
}

background-size:cover在大多数情况下都能正常工作，并且调整大小通常不是问题，但是在某些情况下，某些调整大小后，它会在页面底部留下一条白色的大条带.
背景是1920x1080图片

The background-size:cover works perfectly for the most part and resizing is generally not a problem, but in some cases it leaves a large white strip down at the bottom of the page on some resizes.
The background is a 1920x1080 image

推荐答案

不确定您是否解决了此问题，但是几天来我一直在扯头发，谷歌无法提供任何帮助.我与UI团队的工作人员进行了交谈，结果发现网页的正文不一定覆盖页面的整个高度.将以下内容添加到我的css文件中即可完全解决问题:

Not sure if you solved this problem, but I was tearing my hair out over it for a couple of days and nothing I could Google was helping. I talked to someone at work on our UI team and it turns out that the body of the web page won't necessarily cover the whole height of the page. Adding the following to my css file completely solved the problem:

html {
    height: 100%;
}

body {
    background-size: cover;
    height: 100%;
}

这将拉伸主体的内容以适合窗口的整个高度.仅仅包含"body"位对我有用，但是我的同事告诉我最好同时包含这两个，因为某些浏览器只用其中一个会表现得很好.

This stretches the content of the body to fit the whole height of the window. Just including the "body" bit worked for me, but my coworker informed me that it's better to include both because some browsers will act funny with just one.

这篇关于css3 background-size:覆盖在调整大小时留出空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！