【问题标题】:background-size: cover not working on iOS背景尺寸:封面在 iOS 上不起作用
【发布时间】:2014-08-01 00:33:24
【问题描述】:

这是我的代码:

background-color:#fff;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center center; 

它适用于台式机、iPad 和 Android 移动设备:

在 iPhone 上的 Chrome 和 Safari 上,背景太大:

【问题讨论】:

  • <div class="backdrop"></div> 解决方案由 Ryan 和 Roko 的回答为我工作。但是,我没有在 CSS 块中添加 position: absolute,而是在下面添加了这一行并且效果很好:> min-height: 100vh;

标签: ios css background-image


【解决方案1】:

当您拥有background-attachment:fixed 时,会发生这种情况,尤其是在 iOS 上。在移动设备上,我通常将background-attachment:scroll 放在@media 查询中。

作为@RyanKimber pointed out,固定附加图像使用整个<body> 大小。在移动设备上,这可能会变得非常高,这会让你的形象大吃一惊。将附件设置回scroll 可以让您的封面图片在其自己的容器中拉伸。

【讨论】:

  • 设置最大宽度时不要忘记考虑移动设备是横向的,否则横向时不会触发媒体查询,你会遇到同样的问题。
  • 如果您想要一个没有@media 查询的解决方案,那么请在下面使用一个简单的正文查看我的答案:在 CSS 规则之后,并且没有额外的 html 节点:stackoverflow.com/a/43058483/7765675
  • 对我来说几乎是完美的答案,因为我不介意在必要时切换到background-attachment: scroll。我刚刚调整了媒体查询以仅针对 IOS 移动设备。 @supports (-webkit-overflow-scrolling: touch) { body *: { background-attachment: scroll; } }我发现了这个技巧on another stackoverflow post
【解决方案2】:

详细阐述 Ryan 的答案,不添加任何新的 html 节点或使用 @media 查询,仅使用一个 css

如果您想在包括 iOS 在内的所有设备上保持cover 大小的fixed 背景,而不添加新节点,那么诀窍是在元素(主体)上进行固定定位 本身而不是背景,因为固定的背景和封面尺寸会影响 iOS。

它在生产环境中也能像 iOS 上的魅力一样工作:https://www.doklist.com/

此代码不起作用,因为 iOS 使用 document 的高度而不是 viewport

body {
      background: url(https://www.w3schools.com/css/trolltunga.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

现在这就是魔法,body:after 是固定的,不是背景

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(https://www.w3schools.com/css/trolltunga.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

我本可以使用 body 本身,带有“position:fixed;overflow-y:scroll”,但我不想弄乱 body 的定位和我的整体布局。

所以在 body:after 上执行此操作非常简单。我已经在 Mac 和 iOS 上使用 firefox、safari、chrome 测试了该解决方案。

我还为此创建了一个 github 存储库,其中包含 2 个示例:https://github.com/thesved/fixed-cover-background

【讨论】:

  • 看来 body:after{...} 解决方案完美运行。我刚刚在浏览器堆栈上进行了测试。很好的解决方案!
  • 在尝试了许多其他假设的解决方案之后,这个解决方案在桌面和移动设备上都能完美运行!谢谢维克多!
  • 一定要添加 background-attachment:scroll 用于讨厌的 iphone 背景放大
  • 您的 github 存储库中的示例似乎不适用于在横向使用 iPad Pro 的 iOS12 模拟器。
  • GitHub 存储库运行良好...在 2020 SE+ 手机上进行了测试。
【解决方案3】:

这里有一个简单的解决方法,让 Safari 浏览器中的图片可以正常显示(仅在 Safari 浏览器中滚动,而不是在其他媒体中固定)

@supports ( -webkit-touch-callout : none) {
.selector {
background-attachment:scroll
}
}

@supports not ( -webkit-touch-callout : none) {
.selector {
background-attachment: fixed;
}
}

【讨论】:

  • 谢谢!在将我的头撞到墙上一个小时后,我偶然发现了这个,为什么 IOS / Safari 背景图像是一团模糊的混乱。
【解决方案4】:

这也给我带来了许多问题。问题是 iOS 使用 body 的完整高度和宽度而不是视口来决定大小。

我们的解决方案是创建一个新的<div class="backdrop"></div>

我们将背景应用到这个 div 并给它 position: absolute;顶部:0;底部:0;左:0;正确:0。

由于这个 div 现在是视口的大小,background-size: cover 可以正常工作。

【讨论】:

  • 这些值实际上创建了一个整个身体大小的元素,而不是视口,它重现了原始问题
【解决方案5】:

background-attatchmentfixed 更改为 scroll

.yourClass {
    background-attachment: scroll;
}

【讨论】:

    【解决方案6】:

    这篇文章回答了你的问题:why does CSS background-size: cover not work in portrait mode on iOS?

    并非所有浏览器都能识别背景尺寸的封面关键字,因此,只需忽略它。

    所以我们可以通过将背景大小设置为 100% 的宽度或高度来克服这个限制,具体取决于方向。我们可以定位当前方向(以及 iOS 设备,使用 device-width)。有了这两点,我认为您可以在 iOS 上以纵向模式使用 CSS background-size:cover

    查看该帖子以获取更多资源。

    【讨论】:

      【解决方案7】:

      试试这个:

      background: url( /gfx/background.jpg  ) no-repeat top center fixed; 
      background-size: 100vmax 100vmax;
      

      如前所述,“封面”将覆盖文档高度,而​​不是视图高度。大多数单位将无法按预期工作,因此 vmax。

      不是真正的覆盖,用平方图像做这项工作:)

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-04-07
        • 2016-02-26
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多