后台移动支持

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

后台移动支持

Background mobile support

html

css

image

center