javascript - 视差背景图像不显示在 iphone 上，但它显示在 android 上我该如何解决这个问题

Question

我想创建一个视差，它在 android 上显示得很好，但是当我在 iphone 或 ios 平板电脑上打开它时，背景图像消失了。 android 或 windows 设备上没有问题。我该如何解决这个问题，当我在 android 上单击下拉菜单时，下拉菜单有效，但在 ios 设备上它不起作用。这里是域。 gokkar.com 祝你今天过得愉快 thx

    .parallaxSet{
 background-attachment: fixed;/*background-size: 2261.76px 1178px;*/background-position: 50% -103.564px;
 -webkit-background-size: 100%; 
-moz-background-size: 100%; 
-o-background-size: 100%; 
background-size: 100%; 
}

<div class="parallax background section-height parallaxSet" style="background-image: url(assets/images/banner2.jpg);" data-diff="200">
                <div class="parallax-wrapper">
                    <div class="parallax-scroll">

                        <div class="lastline">
                            <h5>GÖKKAR KURUMSAL</h5>
                            <h6>‘‘Şirketimiz 22 Aralık 1995 tarihinde kurulmuştur. 5 Ocak 1996 tarih ve 3951 sayılı Ticaret Sicili Gazetesi’nde yayımlanarak tescil edilmiştir.’’</h6>
                            <a href="hakkimizda/">İncele</a>
                        </div>
                    </div>
                </div>
            </div>

<style>
.parallax {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  margin: 50px 0 0 0;
  position: relative;
}

  .parallax:after {
    bottom: 0;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;

    border-width: 60px;
    margin-left: -60px;
    z-index: 250;
  }

  .parallax.overflow,
  .parallax.overflow .parallax-wrapper {
    height: auto;
    min-height: 100%;
  }

  .parallax.background {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-position: 50% 50%\9 !important;
  }

  .parallax.section-height {
    height: 400px;
  }

  .parallax-wrapper {
    display: table;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .parallax-scroll {
    display: block;
    position: relative;
  }

  .lastline {
    width: 60%;
    display: block;
    margin: 5px auto 50px auto;
    text-align: center;
    padding: 100px 0;
  }

  .lastline > h5 {
    font-size: 50px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    padding: 0;
  }

  .lastline > h6 {
    font-size: 20px;
    font-weight: 100;
    color: #fff;
    margin: 25px 0;
  }

  .lastline > a {
    width: 300px;
    height: 55px;
    display: block;
    line-height: 50px;
    font-size: 20px;
    margin: 35px auto;
    border: 1px solid #fff;
    background: #fff;
    color: #000;
    font-weight: 500;
    text-align: center;
  }

  .lastline > a:hover {
    background: none;
    color: #fff;
  }


</style>

Answer 1

您正在将 header 从 fixed 更改为 position: static on devices with max-width: 800px

改变:

@media screen and (max-width: 800px)
   header {
      height: auto;
      position: static;
      overflow: hidden;
      border-bottom: 1px solid #eee;
      display: block;
}

收件人:

position: fixed;

您还必须在顶部添加一些边距，这样背景图片就不会位于标题下方。