Naprawiono położenie obrazu tła wewnątrz div

Question

Chcę, aby tło div zostało ustalone, więc przełączanie div da efekt przełączania obrazów, takich jak na ekranie telefonu. To jest jak gorsza wersja tego: https://www.android.com/versions/nougat-7-0/

Fiddle link.

próbuję w ten sposób:

.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>

Ale nie ma szczęścia, ponieważ obraz jest zawsze większy niż div, a nie wewnątrz div jak trzeba, a jeszcze bardziej problemem jest to, że kiedy Zmienia się rozmiar przeglądarki, zmienia się też pozycja tła.

Wiem, ze względu na stałe tło, więc patrzy na otwór i nie tylko div, ale czy istnieje jakieś obejście tego celu?

Tak więc celem jest dobre zdjęcie tła w środku, ALE ustalona pozycja wewnątrz tego div matki, więc podczas przewijania efekt przełączania zostanie podany. Podczas zmiany widoku przeglądarki obraz zawsze ma ten sam rozmiar w centrum div matki.

---

Wiem o magii przewijania, ale chcę po prostu czegoś bardziej "naturalnego" koryta CSS lub minimalnego kodu JS.

Answer 1

Po kilku próbach wyszedłem z tym, ale to rozwiązanie JS, nadal będzie bardzo szczęśliwy, jeśli ktoś złamie go czystym CSS.

Link Fiddle https://jsfiddle.net/w4hz4cqf/31/

Zmieniono kod CSS nieco:

.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; 
    } 

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

Answer 2

Spróbuj

background-size: 29.9% 100% !important; 

Fiddle

Answer 3

Niestety jest to po prostu artefaktem jak pozycjonowanie stałe pracuje w CSS i nie ma sposobu, wokół niego w czystym CSS - trzeba użyć JavaScript.

Przyczyną takiego działania jest połączenie załącznika tła: ustalonego i wielkości tła: okładki. Gdy określasz tło-załącznik: naprawiono to w zasadzie powoduje, że obraz w tle zachowuje się tak, jakby był pozycją: utrwalony obraz, co oznacza, że ​​został usunięty z kontekstu strony i położenia i staje się względny względem rzutni, a nie elementu, który ma obraz tła.

Aby obejść ten problem, należy użyć funkcji dołączania tła: przewiń i połącz detektor zdarzeń z wydarzeniem przewijania w JS, które ręcznie aktualizuje położenie tła w stosunku do odległości przewijania okna w celu zasymulowania ustalonego. pozycjonowanie, ale nadal obliczyć rozmiar tła: okładka względem elementu kontenera, a nie rzutni.