Question

我正在使用Wordpress Zerif Lite模板，并且在手机上显示背景图像时出现问题。我花了很多时间来完善图像的位置，以便在将浏览器调整为移动尺寸时看起来很好，但是当在移动设备上进行测试时，它看起来完全不同。为什么在手机上看起来有所不同？有人可以帮忙吗？

.header-content-wrap {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: right top !important;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    -webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
    box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
    padding: 285px 0 210px;
}

请参阅以下屏幕截图：

移动台：

**链接已删除，现已解决。

调整大小的网络浏览器：

**链接已删除，现已解决。

Answer 1

检查background-position:。看起来它正在使用right top，但您可能只想要center。如果它不同，那么您可能正在使用media queries，这就是为什么它们可以根据屏幕宽度有不同的位置。

更新

图像作为背景应用于身体。在iPhone6上，背景最终为375px x 11267px。它看起来很有趣，因为你是根据夸张的垂直使用背景进行缩放：封面。如果你想解决这个问题，你需要隐藏那个背景图像，当你的屏幕比例像这样疯狂时。我知道你这样做是因为你想要一个固定的位置但附着在身体上并没有帮助。你可以制作一个固定的位置div，它是视口宽度和高度的100％，可以在背景中产生相同的效果。

CSS - 背景图像显示在移动设备上看起来与浏览器调整大小时不同

1 个答案: