Question

我的背景图片似乎无法在移动设备上显示。它在缩放到移动设备尺寸的桌面浏览器上看起来很好，但是当我在iPhone上加载Safari时它并没有出现。链接是：http://lamda.jwoods.me/。我已经包含了相关的HTML和CSS以及它在手机上的显示方式以供参考。

HTML：

<div class="jumbotron main-jumbo">
  <nav class="navbar transparent navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">The Drama Centre</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="lamda.html">About LAMDA</a></li>
          <li><a href="benefits.html">Benefits</a></li>
          <li><a href="classes.html">Classes</a></li>
          <li><a href="teachers.html">Teachers</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
          <li class="visible-lg-block"><a class="navtext">Follow us: </a></li>
          <li><a href="#fb"><i class="fa fa-facebook-official fa-2x"></i></a></li>
          <li><a href="#tw"><i class="fa fa-twitter fa-2x"></i></a></li>
          <li><a href="#ig"><i class="fa fa-instagram fa-2x"></i></a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container jumbo-container">
        <h1> The Drama Centre </h1>

        <h4> A leading LAMDA specific centre in Wiltshire </h4>

  </div>

</div>

CSS：

.main-jumbo {
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.0)
    ),
  url("../img/jumbobgweb.jpg");

    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  margin-bottom: 100px;
  min-height: 60

.main-jumbo h1, .main-jumbo h4{
  color: white;
  text-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}


.jumbo-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

移动图片：

Answer 1

添加这一行CSS解决了我的问题：

@media (max-width: 768px) {
    .main-jumbo {
      background-attachment: scroll;
  }
}

显然背景附件：滚动在移动设备上的效果要好于固定设备。

移动设备上的背景图像大小

1 个答案: