Question

我有一个网页，其中包含一些覆盖页面背景的div中的大图像。然而，我在Android平板电脑上查看页面的页面有一些奇怪的问题，在页面上以纵向方式查看页面（在横向查看时看起来不错）。页面在滚动条旁边的屏幕右侧获得蓝色（与背景颜色相同）（参见下图）。它可能看起来像页面最初缩放错误然后当你缩小缩小时，你可以看到蓝色。就像这些图像没有被画出来一样。

在页面的头部，我添加了以下标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

我已经定义了一些div来放置图像：

<div class="homebg_top">...</div>

我有4个具有不同背景的div。

然后在下面的css中（针对上面的特定div）：

.homebg_top {
    background: url(../images/bg_home_top.jpg) no-repeat center top;
    width: 100%;
    height: 807px;
    margin: 0;
    padding: 0;
}

下图是横向模式下的页面：

下图是处于纵向模式时的情况（注意滚动条旁边的蓝色背景问题）：

Answer 1

试试这个：

.homebg_top { 
   background: url(../images/bg_home_top.jpg) no-repeat center top /cover;
}

Answer 2

示例： https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

.homebg_top {
    width: 100%;
    height: 807px;
    margin: 0;
    padding: 0; 
    background: url(../images/bg_home_top.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 3

你可以试试这个：

.homebg_top{ 
      background: url(http://media02.hongkiat.com/oversized-background-image-design/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='http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale')";
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale');
    }

您可以看到此页http://www.hongkiat.com/blog/oversized-background-image-design/

在html页面的大背景图像

3 个答案: