Question

我的网站上有图像背景：

body {
    background-image:url('tlo.jpg');
    background-color:#000000;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: center center;
    background-size: auto auto;
    (...)
}

PC上没有任何问题，但垂直屏幕的移动设备渲染背景的方式并不完全相同：移动浏览器似乎水平适合背景，因此垂直方向只覆盖了一小块网站。我试图通过使用background-size属性的不同值来修复它，但它不起作用。

我的CSS + HTML：

body {
    background-image:url('tlo.jpg');
    background-color:#000000;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: center center;
    background-size: auto auto;
    margin-left: 0;
    margin-right: 0;
}

#overall {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    height: 100%;
}

#logo {
    position:absolute;
    left:0;
    top:0;
}

#content {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 100%;
    height: 300px;
    background-color:rgba(255,255,255,0.5);
    text-align: center;
}

和

<body>
    <div id="overall">
        <div id="logo"><img src="logo.png" width="654" height="150"></div>
        <div id="content"><a href="#"><img src="cont.png" border="0"></a></div>
    </div>
</body>

Answer 1

我建议你加载两个不同的图像。一个用于桌面，另一个用于移动设备。您可以将较小尺寸的图像用于移动设备，从而减少移动设备的加载时间。您可以使用CSS媒体查询来执行此操作。这是CSS媒体查询的教程。 CSS Media Queries & Using Available Space

Answer 2

这是我提出的解决方案。它在横向和纵向屏幕上都很完美。

background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

移动设备上的图像背景（固定，中心）问题

2 个答案: