修复div内的位置背景图像

Question

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

小提琴链接.

我正在尝试这种方式:

.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内部更多的问题是当浏览器大小改变时,背景位置也在变化.

我知道因为背景附件固定,所以它看起来是一个洞视口而不仅仅是div,但有没有解决方法来实现这个目的？

所以目标是在这个母div内的中心BUT固定位置上很好地具有背景图像,因此在滚动时将给出切换效果.更改浏览器视口图片时,母亲div的中心始终大小相同.

---

我知道滚动魔法,但我只想要一些更"自然"的CSS或者最简单的JS代码.

Answer 1

不幸的是,这只是一个固定定位如何在CSS中工作的工件,并且在纯CSS中无法解决它 - 你必须使用Javascript.

发生这种情况的原因是由于背景附件:固定和背景尺寸:封面的组合.当你指定background-attachment:fixed时,它实际上会导致background-image的行为就像它是一个位置:fixed image,这意味着它从页面流和定位上下文中取出并变得相对于视口而不是它的元素的背景图像.

为了解决这个问题,你基本上需要使用background-attachment:滚动并将事件监听器绑定到JS中的滚动事件,该事件手动更新窗口滚动距离的背景位置,以便模拟固定定位但仍然计算background-size:相对于容器元素而不是视口的覆盖.

Answer 2

经过一番尝试，我想出了这个，但它是一个 JS 解决方案，如果有人用纯 CSS 破解它，我仍然会非常高兴。

小提琴链接https://jsfiddle.net/w4hz4cqf/31/

稍微改变了 CSS 代码：

    .main
    {
      min-height: 1000px;
      width: 500px;
      margin: 0 auto;

    }

    .col1
    {
      width: 150px;
      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: 100px 100px !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: 100px 100px !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: 100px 100px !important;
        background-attachment: fixed !important;
    }

添加了JS代码：

    jQuery(document).ready(function(){
      backgroundImageSize = 100;

      elem = jQuery(".row1 .col1, .row2 .col1, .row3 .col1"); 
      for(ind = 0; ind < 3; ind++) {
        elem[ind].getBoundingClientRect();

          elem[ind].style.setProperty('background-position', (elem[ind].getBoundingClientRect().left + jQuery(".col1").width() / 2 - (backgroundImageSize/2))+'px center', 'important');
      }

      var width = $(window).width();
      $(window).on('resize', function(){
         if($(this).width() != width){
            width = $(this).width();
            elem = jQuery(".row1 .col1, .row2 .col1, .row3 .col1"); 

            for(ind = 0; ind < 3; ind++) {
              elem[ind].getBoundingClientRect();
              elem[ind].style.setProperty('background-position', (elem[ind].getBoundingClientRect().left + jQuery(".col1").width() / 2 - (backgroundImageSize/2))+'px center', 'important');
            }
         }
      });
    });