修復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

試試這個

background-size: 29.9% 100% !important;

小提琴

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');
            }
         }
      });
    });