CSS背景COVER财产上的电话犯规工程 [英] CSS Background COVER property doesnt works on Phone

问题描述

我遇到一个奇怪的问题：当我打开我的的Andr​​oid 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.

下面是从手机屏幕上：

code饮片，根据背景属性：

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

虽然，我已经试过在设置最小hegith和宽度财产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.

推荐答案

请尝试以下code片段。这似乎是解析多个 CSS 标签为背景属性本地的Andr​​oid 浏览器的问题。因此，定义每个单独的属性可以帮助：

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屋！