0

我沿着这条线找到了几个查询，他们要么没有解决方案，要么他们的解决方案对我不起作用。我设置了媒体查询，最小的是最大宽度（700px），当我在桌面上预览网站时，我的浏览器设置为 iPhone 的宽度，预览效果很好。但是，当在我的实际 iPhone 上预览时，它只显示照片的一小部分。（在 Safari 和 Chrome 中。）我不确定 Android 设备，因为我没有要测试的设备。

编辑：完整网站http://www.dragonflyav.com

这是CSS：

  @media (max-width: 700px) {
    .intro {
        background-image: url("images/backgrounds/fleet-top-770.jpg"); 
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        background-attachment: fixed;
        height: 75vh;
    }

我确定我错过了一些简单的东西，我尝试了上述几种变体，包括单独放弃每个不同的属性，但没有运气。我的 HTML 元标记如下：

        <meta name="viewport" content="width=device-width" content="initial-scale-1">

4

1 回答 1

0

您正在推翻错误的样式。在您使用的桌面样式上：

background: url(images/backgrounds/fleet-top-2400.jpg) no-repeat center center fixed;

并在您使用的响应式上：

background-image: url("images/backgrounds/fleet-top-770.jpg");

这样，您将在响应式图像之上看到桌面图像。仅使用一个背景属性将为您解决问题。所以我个人会坚持：

background-image: url(images/backgrounds/fleet-top-2400.jpg) no-repeat center center fixed;
于 2016-04-04T14:03:49.803 回答