为什么背景大小：封面在移动 Safari 上不起作用？

在 Mobile Safari 上覆盖背景图像

Mobile Safari 的背景大小的独特行为：封面属性可能会令人沮丧。图像通常保持居中，不受视口宽度的影响，而不是覆盖整个 div。不过，这个问题可以通过一些修改轻松解决。

解决方案：

要使背景图像覆盖整个 div，即使在 Mobile Safari 上，也可以调整background-attachment 属性：

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

#section2 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

#section3 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

工作原理：

通过设置background-attachment：scroll，现在允许图像随着页面内容滚动。这可以确保图像始终覆盖 div 的整个宽度，无论设备或视口宽度如何。

此解决方案有效地替换了 Mobile Safari 上的 background-size: cover 行为，使您可以轻松创建完整的内容- 响应不同屏幕尺寸的宽度背景图像。

以上是为什么背景大小：封面在移动 Safari 上不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！