如何在不使用'background-size: cover”的情况下扩展 Mobile Safari 中的背景图像？

在移动 Safari 中扩展背景图片而不使用 CSS background-size: cover

而 CSS background-size: cover 通常用于扩展背景图像，某些场景，特别是在 iOS 设备上，可能会带来挑战。其中一个问题涉及扩展背景图像以覆盖宽度可能因视口大小和内容高度而变化的 div。

此问题的主要原因不是背景大小：覆盖，而是背景附件：已修复。此属性可防止背景图像随页面内容移动，从而在移动设备上产生不需要的行为。

要解决此问题，请考虑使用媒体查询专门针对 iPhone 设备，并将 background-attachment 属性设置为滚动。这允许背景图像随页面滚动，有效解决问题。

以下是一个针对 iPhone 设备的带有媒体查询的 CSS 代码示例：

.cover {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

通过合并此代码媒体查询，您可以确保您的背景图像不仅会扩展以覆盖整个 div，而且还能优雅地适应桌面和移动设备上不同的视口大小。

以上是如何在不使用'background-size: cover”的情况下扩展 Mobile Safari 中的背景图像？的详细内容。更多信息请关注PHP中文网其他相关文章！