javascript - 在 div 中固定位置背景图像

Question

我想固定一个div的背景，所以切换div会产生像在手机屏幕上切换图像的效果。这就像这个的恶化版本:https://www.android.com/versions/nougat-7-0/

fiddle link .

我是这样尝试的:

.main {
  min-height: 1000px;
}

.col1 {
  width: 29.9%;
  min-height: 800px;
  display: inline-block;
  float: left;
}

.col2 {
  width: 70%;
  min-height: 800px;
  display: inline-block;
}

.row1 .col1 {
  background: rgba(238, 238, 34, 0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/24-hours-phone-icon.png") !important;
  background-position: left !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-attachment: fixed !important;
}

.row2 .col1 {
  background: rgba(238, 238, 34, 0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/abs-icon.png") !important;
  background-position: left !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-attachment: fixed !important;
}

.row3 .col1 {
  background: rgba(238, 238, 34, 0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-down-icon.png") !important;
  background-position: left !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-attachment: fixed !important;
}

<div class="main">
  <div class="row1">
    <div class="col1">
      Col1
    </div>
    <div class="col2">
      Col2
    </div>
  </div>
  <div class="row2">
    <div class="col1">
      Col1
    </div>
    <div class="col2">
      Col2
    </div>
  </div>
  <div class="row3">
    <div class="col1">
      Col1
    </div>
    <div class="col2">
      Col2
    </div>
  </div>
</div>

但没有运气，因为图片总是比 div 大，而不是我需要的 div 内部，甚至更多的问题是当浏览器大小改变时，背景位置也在改变。

我知道因为背景附件是固定的，所以它看起来是一个孔视口(viewport)而不仅仅是一个 div，但是有什么解决方法可以实现这一点吗？

所以目标是让背景图像很好地位于中心但固定在这个母 div 内的位置，因此当滚动时将给出切换效果。更改浏览器视口(viewport)时，图片在母 div 的中心始终保持相同大小。

---

我知道滚动魔法，但我只想通过 CSS 或可能最少的 JS 代码获得更“自然”的东西。

Answer 1

不幸的是，这只是 CSS 中固定定位工作原理的产物，在纯 CSS 中无法绕过它 - 你必须使用 Javascript。

发生这种情况的原因是 background-attachment: fixed 和 background-size: cover 的结合。当您指定 background-attachment: fixed 时，它本质上会导致 background-image 的行为就好像它是一个 position: fixed 图像，这意味着它从页面流和定位上下文中取出并变得相对于视口(viewport)而不是它所在的元素的背景图片。

要解决这个问题，您基本上需要使用背景附件:滚动并将事件监听器绑定(bind)到 JS 中的滚动事件，该事件会根据窗口滚动的距离手动更新背景位置，以模拟固定定位但仍然计算背景大小:覆盖相对于容器元素而不是视口(viewport)。