视差背景图像不显示在iPhone上，但它是显示在Android如何解决这

Question

我想创造一个视差，其显示效果非常出色Android上，但是当我打开它在iPhone或iOS平板电脑的背景和图像dissapear。有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

你正在改变你的头从固定位置：静态与最大宽度设备：800像素

更改：

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

至：

position: fixed;

你还必须添加一定的余量顶部，这样的背景图像不标题下坐。

Answer 2

IOS停用“background-attachment:fixed”功能，以减少对移动设备的费用。

你唯一的选择是使用background-attachment:scroll。这这么想的同样的效果，你想，但你可以做一些JavaScript解决方法，你可以看到here

更好的方法：使用媒体查询并显示一个图像与固定的位置。