图像未显示iPhone(在包括Android在内的所有设备上正常)

Question

我浏览了多个关于此的帖子，但这似乎不适用于我的情况。我有 2 张未在 iPhone 上显示的背景图像(仅(，适用于桌面和安卓

我已将其添加到索引中.html

meta name="viewport" content="width=device-width, initial-scale=1.0"

在CSS中，它们的编码略有不同，image1

.jumbotron {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
  background-size: cover;
  background-position: center 15%;
  height: 100vh;
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin-left: -20px;
  margin-right: -20px;
  border-radius: 1px;
  margin-bottom: 0rem;
}

和图像2

.testimonials {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url(img/testimonials.jpg);
  background-size: cover;
  background-position: right;
  color: #fff;
  background-attachment: fixed;
  margin: 0px;
}

在响应式大小方面，我只会针对巨型机器人的其他元素(例如 h1、按钮(进行调整，但没有针对推荐的具体

内容

谁能透露一些信息？谢谢！

Answer 1

这是因为iOS并不完全支持background-attachment: fixed;。我建议使用媒体查询将background-attachment: scroll;用于移动设备。

@media (max-width:768px) {
  .jumbotron,
  .testimonials {
    background-attachment: scroll;
  }
}

您可以在此处查看支持。