Hình nền vị trí cố định bên trong div

Question

Tôi muốn tạo nền của div cố định để chuyển div sẽ có tác dụng chuyển đổi hình ảnh như trên màn hình điện thoại. Nó giống như phiên bản tồi tệ của điều này: https://www.android.com/versions/nougat-7-0/

Fiddle link.

tôi đang cố gắng theo cách này:

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

Nhưng không có may mắn kể từ khi hình ảnh là luôn luôn lớn hơn div và không phải bên trong div như tôi cần và vấn đề thậm chí nhiều hơn là khi kích thước trình duyệt đang thay đổi vị trí nền cũng đang thay đổi.

Tôi biết vì tệp đính kèm nền được cố định, do đó, nó đang tìm kiếm một khung nhìn lỗ và không chỉ là div, mà còn có cách giải quyết khác để đạt được điều này không?

Vì vậy, mục tiêu là để có hình nền độc đáo trên trung tâm NHƯNG vị trí cố định bên trong div mẹ này, do đó, khi cuộn một hiệu ứng chuyển đổi sẽ được cung cấp. Khi thay đổi hình ảnh của trình duyệt, chế độ xem sẽ luôn có cùng kích thước ở giữa div mẹ.

---

tôi biết về cuộn ma thuật, nhưng tôi chỉ muốn một cái gì đó nhiều hơn "tự nhiên" máng CSS hoặc sức tối thiểu mã JS.

Answer 1

Sau khi một số cố gắng tôi đi ra với điều này, NHƯNG nó là một giải pháp JS, vẫn sẽ rất hạnh phúc nếu có ai crack nó với CSS tinh khiết.

liên kết Fiddle https://jsfiddle.net/w4hz4cqf/31/

mã CSS đã thay đổi một chút:

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

Added JS Mã số:

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

Hãy thử điều này

background-size: 29.9% 100% !important; 

Fiddle

Answer 3

Thật không may này chỉ đơn giản là một artifact của cách định vị cố định làm việc trong CSS và không có cách nào xung quanh nó trong CSS tinh khiết - bạn phải sử dụng Javascript.

Lý do điều này xảy ra là do sự kết hợp của nền đính kèm: cố định và kích thước nền: bìa. Khi bạn chỉ định background-attachment: cố định về cơ bản làm cho background-background hoạt động như thể nó là một vị trí: image cố định, nghĩa là nó được lấy ra khỏi luồng trang và bối cảnh định vị và trở nên tương đối so với viewport hơn là phần tử hình nền của. Để giải quyết vấn đề này, về cơ bản bạn cần sử dụng background-attachment: cuộn và liên kết một trình nghe sự kiện với sự kiện cuộn trong JS cập nhật thủ công vị trí nền tương đối so với cách cửa sổ được cuộn để mô phỏng cố định định vị nhưng vẫn tính toán kích thước nền: bao gồm tương đối so với phần tử vùng chứa thay vì chế độ xem.