51

我正在将该background-size属性用于全宽和全高背景图像，但在纵向视图的 Nexus7 平板电脑上的 Chrome 中无法完全覆盖它。它只覆盖宽度而不是高度，即200px它下面大约有空白区域。但是，当我在桌面 Chrome（或其他任何东西）和垂直显示器上查看该站点以模拟纵向尺寸时，它没有任何问题。

有人有解决方案吗？

CSS：

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

纵向屏幕截图：

4

6 回答 6

101

我相信您可以通过在 CSS 中定义 html 和 body 标签的高度来修复它，如下所示：

html{
 height:100%;
 min-height:100%;
 }
body{
 min-height:100%;
 }

希望这可以帮助

于 2013-10-18T14:47:04.347 回答
31

我知道这个问题已经很久没有问过了，但我只是找到了我认为的答案。对我来说，如果你在后台 CSS 指令中省略了“fixed”，那么 background-size:cover 可以在 Android 浏览器和 Android Chrome 中使用。经过一些测试，它适用于我将图像作为 DIV 的背景：

#yourDivSelectorHere { 
width: 100%;
height: 100%;  
position: fixed;
top: 0;
left: 0;
z-index: 0; 
background-image: url(/img/backgrounds/1.jpg) ;
background-repeat:no-repeat;
background-position: center center;
/* background-attachment: fixed; removed for Android */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

DIV 本身的位置是固定的（与背景图像相反），宽度和高度为 100%，并且放置在所有内容的后面。与仅将背景图像添加到 HTML 或 BODY 相比，这需要付出一些额外的努力，但对我来说，它适用于我迄今为止测试过的所有浏览器（FF、Chrome、IE8、IE9、Safari）、iPad2 和 Android Chrome 以及安卓浏览器。

于 2013-10-25T16:02:07.787 回答
7

我将提供我找到的解决方案，以防将来有人遇到这种情况。我没有使用背景图片，而是使用了<img>：

HTML：

<img id="full_bg" src="/images/post_bg.jpg" alt="Post your project on CustomMade">

CSS：

#full_bg {
    height: auto;
    left: 0;
    min-height: 100%;
    min-width: 1024px;
    position: fixed;
    top: 0;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    #full_bg {
        left: 50%;
        margin-left: -512px;
    }
}

这适用于跨浏览器和移动设备。我在这里找到了解决方案。

于 2013-02-15T12:29:09.127 回答
6

好吧，我可以想出另一个解决方案：我将它添加到正文中，您需要注意的是， background-attachment:fixed 是最后一条规则：

作品：

body {
        height:100%;
        width:100%;
        background-size:cover;
        background-repeat:no-repeat;
        background-position: center center;
        background-attachment:fixed;
}

不工作：

body {
            height:100%;
            width:100%;
            background-size:cover;
            background-attachment:fixed;
            background-repeat:no-repeat;
            background-position: center center;
}

真的很遗憾，电话浏览器一般来说有点儿马车......

于 2016-09-01T17:52:29.580 回答
2

使用 HTML 背景而不是正文并给出“高度：100%”

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

于 2017-04-20T18:44:47.127 回答
1

我发现了另一种使用 jquery 东西的解决方案。该修复基于我们使用横向尺寸/比例的图像作为背景的假设。

step1：比较“窗口高度”和“页面内容高度”

step2：如果“窗口高度”小于“页面内容高度”

step3：将此应用于body标签

HTML {

<body style="background-size: auto 'page content height'; background-attachment: scroll;">

}

脚本

var wHeight = $(window).height();
    var bodyHeight = $('page-content-element').height();
    if(wHeight < bodyHeight){
        $('body').attr('style', 'background-size: auto '+ (bodyHeight*1.1) +'px;background-attachment: scroll;');
    }
    else{
        $('body').removeAttr('style');
    }

在页面加载和窗口调整大小时调用它

于 2014-09-24T06:28:48.493 回答