背景图像没有正确显示在移动设备上

问题描述：

我似乎无法使用下面的代码在移动设备中显示适合全屏的图像。但在我自己的电脑上，它看起来非常好。背景图像没有正确显示在移动设备上

#topContainer { 

    height:1048px; 
    width: 100%; 

    padding: 0; 
    margin: 0; 

} 

#div1 { 

    background-image: url("images/Healthy-Eating.png"); 
    height:1048px; 

    margin: 0; 
    background-size:cover; 
    position: relative; 
    padding-top: 40px; 
} 



#freeEbook { 

    background-color: rgba(0, 0, 0, 0.6); 
    height: 750px; 
    width: 535px; 
    border-bottom: 0px; 
    transition: background-color .5s ease 0s; 
    position: absolute; 
    color: #fff; 
    font-size: 1em; 
    padding: 10px; 

}

为什么会发生这种情况，我该如何解决？

我已编辑您的问题，以删除各种绒毛，特别是一个链接，看起来像一个垃圾网站。我还删除了帖子的最后部分，该帖子太宽泛以至于无法按照[帮助]标准输入。 –

指定大的高度往往是一个错误。您可能想要使用％或vh。问题可能是1048像素的高度和普通手机的可能宽度（〜320 css px）作为容器没有意义。因此，设置一个包含在这些维度中的背景图片可能会变得很奇怪。为了澄清问题所在，请张贴想要的行为与不需要的屏幕截图。 –

您的代码将需要大量重构才能使其重新获得成功。 –

答

您正在为图像设置一个固定高度1048px，#div1。这意味着无论屏幕如何，图像总是高1048像素。这可能适用于您的机器，但机会是您的手机屏幕比这更小！尝试在#div1以下CSS：

#div1 { 
    background-image: url("images/Healthy-Eating.png"); 
    height: 100vh; 
    width: 100%; 
    margin: 0; 
    background-size:cover; 
    position: relative; 
    padding-top: 40px; 
}

height: 100vh设置图像高度要视高度的100％。

背景图像没有正确显示在移动设备上

相关推荐