CSS Background COVER 属性在电话上不起作用

Question

我遇到了一个奇怪的问题：当我在我的Android 4.1 手机（默认浏览器）上打开一个网站时，背景图片没有按应有的方式覆盖背景。

这是手机屏幕：

代码片段，根据背景属性：

...
<meta name="viewport" content="width=device-width">
...
background: #fff url('img/main_bg.png')no-repeat center center;
-webkit-background-size: cover !important;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/main_bg.png', sizingMethod='scale')";
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/main_bg.png', sizingMethod='scale')";

虽然，我尝试过将 min-hegith 和 width 属性设置为 100 % - 并没有使事情奏效。

希望您有任何想法，如何解决这个问题。

Answer 1

试试下面的代码 sn-p。为背景属性解析多个CSS标签似乎是原生Android浏览器的问题。因此，单独定义每个属性可能会有所帮助：

...
<meta name="viewport" content="width=device-width">
...
background-image:url('img/main_bg.png');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover !important;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/main_bg.png', sizingMethod='scale')";
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/main_bg.png', sizingMethod='scale')";