CSS背景COVER属性不适用于电话 [英] CSS Background COVER property doesnt works on Phone

问题描述

我遇到一个奇怪的问题：当我在我的 Android 4.1手机（默认浏览器）上打开一个网站时，背景图片不会覆盖背景，因为它应该。

I'm experiencing a strange issue: When I open a website on my Android 4.1 phone (default browser), the background image doesnt cover the background as it should.

以下是来自手机的屏幕：

Here is the screen from phone:

根据背景属性的代码块：

Pieces of code, according to background attributes:

...
<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％

Although, things that I've tried is setting the min-hegith and width property at 100 % - didnt make the things work.

希望你有任何想法，如何找出这个问题。

Hope that you have any ideas, how to figure out this issue.

推荐答案

尝试下面的代码片段。似乎是本机 Android 浏览器解析多个 CSS 背景属性的标签的问题。因此，定义每个属性可能有帮助：

Try the following code snippet. It seems to be a problem of the native Android browser to parse multiple CSS tags for the background property. So define each property seperate might help:

...
<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')";

这篇关于CSS背景COVER属性不适用于电话的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！