Question

我无法在目标网页上正确显示背景。在我的桌面上，它显示正常，但在移动设备上，它似乎在页面顶部的垂直中间居中。我是前端的新手，在过去的4个小时里一直在尝试各种各样的黑客攻击。有人能指出我正确的方向吗？

我已将图像设置为缩放以覆盖整个屏幕。不应该是任何空白区域。我尝试在我的桌面上使用自适应模式，而Wright Glider大部分都在我调整大小时保持在视野中，因此图像也应该居中于...视口？/窗口的中间。

对于背景，我有一个正常大小的图像，以及我用于较小设备的裁剪图像

我的网站位于http://we-fly.ddns.net

仅在所有设备上使用Chrome 49进行测试，Android为v5.1

桌面上的响应模式似乎没有产生相同的效果。

来源：https://gist.github.com/yanalex981/992a60dd54be82162a45

截图：

另外，如果有人有任何建议，请与我分享

Answer 1

要解决您的图片问题在某种程度上被切断的问题，您需要将媒体查询中的背景位置设置为初始...所以在每个css Media查询中粘贴以下代码：

background-position: initial;

这将在移动设备上将您的背景位置重置为默认值...从这里您可以应用不同的样式来拉伸/扩展您喜欢的图像。 :)

Answer 2

这是我的第二个答案，我创建了这个，而不是将它添加到我的初始答案，因为方法不同。

在HTML（索引）文件中，添加如下图像：

<img id="imgBackground" src="http://we-fly.ddns.net/images/back.jpg" />

（我建议在身体标签后直接添加）

在你的CSS中，我只是要发布整个内容，它有点搞笑因为你的上一个@Media（最小宽度：601px）覆盖了桌面版的默认值...你可能要考虑删除此媒体查询...请参阅下面的代码中的注释以查看更改：

    /* Set initial values for your image background */
#imgBackground{
    position:absolute; /* Absolute Positioning so we can use "top" and "Left" */
    top:0px; /* Set top edge to 0px (Top of the screen) */
    left:0px; /* Set left edge of image to 0px, so it starts at the left edge of the screen. */
    width:100%; /* We want our widt to be 100% of our browser window */
    height:auto; /* we don't care about the image height, so let it set itself based on the image's proportions */
    position:fixed; /* Make our image scroll with the user so if they can scroll they don't leave our background behind, exposing the white "body" tag background. */
}

body {
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
}

#quote-conatiner {
    position: fixed;
    margin: auto auto 24px auto;
    bottom: 20%;
    left: 0;
    right: 0;
    text-align: center;
    background-color:rgba(180, 180, 180, .4);
}

h3 {
    font-family: Garamond sans-serif;
    color: white;
    width: 80%;
    margin: .5em auto .5em auto;
}

.button {
    font-family: sans-serif;
    text-decoration: none;
    padding: .3em 0.6em;
    border-radius: 8px;
    border: 2px solid #59169c;
    background-color: #417;
    color: white;
    box-shadow: 0 0 64px black;
}

.button-container {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    top: 80%;
    left: 0;
    right: 0;
}

.button:active {
    background-color: #330855;
}

@media only screen and (max-width: 600px) {

/* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
    #imgBackground{
        position:absolute;
        top:0px;
        left:0px;
        width:auto;
        height:100%;
        position:fixed;
    }

    body {
        margin: 0;
        padding: 0;
    }

    h3 {
        font-size: 1.2em;
    }

    .button {
        font-size: 1.4em;
    }
}

@media only screen and (max-width: 400px) {

    /* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
    #imgBackground{
        position:absolute;
        top:0px;
        left:0px;
        width:auto;
        height:100%;
        position:fixed;
    }

    body {
        margin: 0;
        padding: 0;
    }

    h3 {
        font-size: 0.8em;
    }

    .button {
        font-size: 1.0em;
    }
}

/* May want to consider getting rid of this Query, if you don't it is overriding your styles set above your media querys. */
@media only screen and (min-width: 601px) {

    /* Set image background qualities for any display larger than 601px.*/
    #imgBackground{
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:auto;
        position:fixed;
    }

    body {
        margin: 0;
        padding: 0;
    }

    h3 {
        max-width: 600px;
        font-size: 1.3em;
    }

    .button {
        font-size: 1.3em;
    }
}

Answer 3

"background-size: cover" does not cover mobile screen

和

height: 100% or min-height: 100% for html and body elements?

得到答案。我必须设置background-size: cover的根元素的高度才能工作：

html {
    height: 100%;
}

body {
    min-height: 100%;
}

适用于Nexus 4和Galaxy Tab

必须这样做的原因（从上次回答中被盗）：

顺便提一下，您必须分别指定height和min-height到html和body的原因是因为这两个元素都没有任何内在高度。默认情况下，两者都是height: auto。视口具有100％的高度，因此从视口中取出height: 100%，然后将body作为最小值应用于允许滚动内容。

Answer 4

@Alex你想要显示图像的确切程度...对于不同的屏幕尺寸，您可以使用@media css属性根据屏幕尺寸调整图像大小。

exit

在此处查看有关@media css属性的更多信息： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

CSS背景图像出现在移动设备上的错误位置

4 个答案: