Question

我查看过多个帖子，但这似乎不适用于我的情况。我有2个背景图像没有在iPhone上显示（仅限），它适用于桌面和Android

我已将此添加到index.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;
}

image2

.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;
}

在响应大小调整方面，我只调整了jumbotron的其他元素（例如h1，按钮），但没有针对推荐的具体内容

请问有人可以解决一些问题吗？谢谢！

Answer 1

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

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

<强> You can check here for support

图片没有显示iPhone（包括Android在内的所有设备都可以）

1 个答案: