后台移动支持

Question

以下代码在桌面上运行良好。但在移动设备上，图像无法正确集中

<style>
    html, body
    {
        margin: 0px;
        padding: 0px;
        height: 4000px; /* just an example */
    }
</style>
<div style="
        background-image: url('img/bg1.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
            background-size: contain;
            width: 100%;
            height: 100%;
            z-index: 998;">
</div>

我希望它固定在屏幕中央。

Answer 1

我猜它会对你有用。

<style>
    html, body
    {
        margin: 0px;
        padding: 0px;
        height: 100% !important; /* @nicfo advice, for working on mobiles */
    }
</style>
<div style="
        background-image: url('http://www.w3schools.com/images/w3schools.png');
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
            background-size: 100% 100%;
            background-size: contain;
            width: 100%;
            height: 100%;
            z-index: 998;">
</div>

Answer 2

拉伸图像以填满屏幕：

background-size: 100% 100%;

在不拉伸图像的情况下填充屏幕：

background-size: cover;

source