Question

我的Android移动设备上的网站出现问题。当我在我的网站上滚动时，背景图像的位置很笨拙，有时当我滚动背景时甚至没有正确定位，也没有显示。当我在横向

中使用我的设备时，此错误更明显

网站是：http://qubik-design.co.nf/index.php/category/catalogo/

在移动设备上访问它并向下滚动，您会看到图像跳转。

我已经看了这篇文章Background image jumps when address bar hides iOS/Android/Mobile Chrome而且我做了几件事情已经在那里说过但是没有用。我试了好几天而没有。

你们能解开一些光吗？我用于背景的代码

body.custom-background {
    background-image: url("http://qubik-design.co.nf/wp-content/uploads/2015/08/intro-bg1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: left top;
    background-attachment: fixed;
}

body {
    background: #111 none repeat scroll 0% 0%;
    height: 100%;
    width: 100%;
}

图片在哪里

<ul id="supersized" class="quality" style="visibility: visible;">
     <li class="slide-0 activeslide">
        <a target="_blank">
            <img src="http://qubik-design.co.nf/wp-content/uploads/2015/08/intro-bg1.jpg" style="width: 1903px; left: 0px; top: 295.5px;">
        </a>
     </li>
</ul>

css

#supersized {  display:none; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }   /*Speed*/
#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
#supersized a { width:100%; height:100%; display:block; }
#supersized li.activeslide { z-index:-10; }
#supersized li.activeslide img{ display:inline; max-width:none; }

Answer 1

尝试将background-size设置为cover而不是100% 100%：

body.custom-background {
    background-image: url("http://qubik-design.co.nf/wp-content/uploads/2015/08/intro-bg1.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: fixed;
    background-size: cover;
}

当我在Android手机上滚动时，背景跳跃

1 个答案: