Question

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

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

我知道因为背景附件已修复，所以它看起来只是一个洞视口而不是div，但是有没有解决办法来实现这个目标？

所以目标是将背景图像很好地放在这个母div内的中心BUT固定位置上，所以在滚动时会给出切换效果。更改浏览器视口图片时，母校div的中心位置始终相同。

我知道滚动魔法，但我只想要一些更“自然”的CSS或者最简单的JS代码。

Answer 1

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

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

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

Answer 2

试试这个

background-size: 29.9% 100% !important;

Fiddle

Answer 3

经过一番尝试，我推出了这个，但它是一个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');
            }
         }
      });
    });

修复div内的位置背景图像

3 个答案: