移动设备中的视差答案

【问题标题】：Parallax in mobile devices移动设备中的视差
【发布时间】：2016-10-26 15:56:30
【问题描述】：

我正在构建一个使用视差背景的网站。它在我的 Mac 上的 Safari 和 Chrome 中运行良好，但 background-size: cover 在移动设备上根本不起作用。图片放大，视差功能关闭。

我一直在寻找一个简单的解决方案，但在任何地方都找不到。只要背景图片具有适当的尺寸，我很乐意在移动设备上失去视差功能。

帮助？附上基本代码。

HTML：

<body>

<div id="bg01" class="bg01">
</div>

<div class="divwrapper">
<div class="div" id="div">
CONTENT
</div>
</div>

<div id="bg02" class="bg02">
</div>

</body>

CSS：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    background-color: red;
}

.divwrapper {
    display: table;
    width: 80%;
    margin:auto; 
    font-size: 12px;
    line-height: 150%;
    text-align: center;
}

.div {
    height:300px;   
}

.bg01 { 
    background-image: url("https://s-media-cache-ak0.pinimg.com/originals/52/cc/af/52ccaf818ddc056e12e522b9395dd87d.jpg");
    height: 100%; 
    width: 100%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.bg02 { 
    background-image: url("http://blog.hostbaby.com/backgrounds/bg_lightwoodfloor.jpg");
    height: 100%; 
    width: 100%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Here is the JSFiddle

编辑/更新

我尝试过使用不同的媒体查询，至少通过将 div 背景图像更改为较小的图像来获得正确的比例，但这根本不起作用（它仍然使用放大的大图像）：

@media (max-width: 600px) {
        .bg01 { 
    background-image: url("../images/bg_small.jpg");
    background-size: 20% 20%;
    background-repeat: repeat;
    }
  }

我也尝试过最小宽度和最大宽度。

【问题讨论】：

您的代码没有任何视差。视差通常涉及 JavaScript 来处理背景的偏移移动。
@j08691 实际上不，视差可以使用浏览器设备的内置 GPU 完全通过 3D CSS 完成，因为手机通常没有 GPU，这意味着视差在手机上的观看效果最好。 reference
嗯，至少有点视差吧？那种功能。但是，如果这对于移动设备来说是可行的，那么我可以将这些 div 放在一起。在桌面上看起来不错。

标签： html css parallax

【解决方案1】：

我通常使用此处提供的“封面清单”： https://css-tricks.com/perfect-full-page-background-image/ 但如果您需要查看整个图像，则不是一个很好的用法

试试 Keith Clark 的解决方案：我用移动工具试了一下，效果很好。只需用图像替换背景。 http://keithclark.co.uk/articles/pure-css-parallax-websites/

HTML

<div class="parallax">

<div id="group1" class="parallax__group">
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

<div id="group2" class="parallax__group">
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--back">
    <div class="title">Background Layer</div>
  </div>
</div>

<div id="group3" class="parallax__group">
  <div class="parallax__layer parallax__layer--fore">
    <div class="title">Foreground Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

<div id="group4" class="parallax__group">
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--back">
    <div class="title">Background Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--deep">
    <div class="title">Deep Background Layer</div>
  </div>
</div>

<div id="group5" class="parallax__group">
  <div class="parallax__layer parallax__layer--fore">
    <div class="title">Foreground Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

<div id="group6" class="parallax__group">
  <div class="parallax__layer parallax__layer--back">
    <div class="title">Background Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

<div id="group7" class="parallax__group">
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

【讨论】：

出于某种原因，我希望只通过 css 来做，但也许我应该从这个 js 解决方案重新开始。
Keith Clark 制作了一些很棒的东西。和@soulitude Keith Clarks 的解决方案只有 CSS，没有 Javascript，但你应该知道，要让它正常工作，设备应该有一个 GPU。
这是一个很好的解决方案，但我真的无法让照片正确缩小。只要照片是全宽的，我就可以在移动设备上使用更静态的版本 - 失去视差的东西。