logo标签列表

背景大小：在安卓平板的竖屏模式下无法使用“cover”属性

androidcssgoogle-chromecoverbackground-size
51

我正在使用background-size属性来设置全屏背景图，但在Chrome浏览器下的Nexus7平板电脑竖屏模式下无法完全覆盖。它只覆盖了宽度而没有覆盖高度，也就是说下面留有约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')";
}

肖像截屏：

6个回答
100

我相信你可以通过在CSS中定义html和body标签的高度来修复它，像这样：

html {
  height: 100%;
  min-height: 100%;
}
body {
  min-height: 100%;
}
6
请注意，就我的情况而言，我只需要html元素的height或min-height，没有其他要求。 - Rufflewind
31

我知道这个问题提出已经有很长一段时间了，但我刚刚找到了答案。 对于我来说，在Android浏览器和Android Chrome中，如果在背景CSS指令中省略“fixed”，background-size:cover就有效果。 经过一些测试，我发现将图像作为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和Android Browser。
3
好时机！这对我有用，我认为应该被接受为答案！ - Raj
1
事实上，background-size可以做的远不止覆盖，而这也是它无法胜任的地方。 - Morg.
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;
    }
}

这可以在不同的浏览器和移动设备上工作。我在这里找到了解决方案。

6
我可以提供另一种解决方案： 我将其添加到body中，你需要注意的是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;
}

很遗憾，通常情况下手机浏览器存在一些小故障...
该死！！我为此搜索了很久。你知道为什么需要使用fixed吗？我检查了很久。 - Tallboy
不，我不知道为什么会这样。我认为这只是一个bug，因为它只有在最后一条规则时才起作用，这对我来说在技术上没有任何意义... - BastianBalthasarBux
2
请使用HTML背景代替body，并添加 'height: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;
}

1
我发现了另一个使用一点jquery技巧的解决方案。该修复程序基于假设我们在背景中使用横向尺寸/比例的图像。
步骤1：比较“窗口高度”和“页面内容高度”。
步骤2：如果“窗口高度”小于“页面内容高度”。
步骤3：将此应用于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');
    }

在页面加载和窗口调整大小时调用此函数。
你能更详细地解释什么是page-content-element和page content height吗？例如，你能展示一个更完整的例子吗？ - Darren Cook
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接