div内の固定位置のバックグラウンド画像

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内の固定位置ですが、スクロールすると切り替え効果が得られます。ブラウザのビューポートピクチャを変更すると、マザーdivの中央で常に同じサイズになります。

---

私はスクロール魔法について知っている、しかし、私はちょうどより多くの何か「自然な」トラフCSSやJSかもしれない最小のコードをしたいです。

Answer 1

いくつか試してみたが、これは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'); 
      } 
     } 
     }); 
    }); 

Answer 2

この

background-size: 29.9% 100% !important; 

Fiddle

Answer 3

を試してみてください残念ながら、これは単に固定された位置決めがCSSでどのように動作するかのアーティファクトで、純粋なCSSでその周りに方法はありません - あなたはJavascriptを使用する必要があります。

この理由は、background-attachment：fixedとbackground-size：coverの組み合わせによるものです。 background-attachment：fixedを指定すると、基本的にbackground-imageがposition：fixedイメージのように振る舞います。つまり、ページフローと位置付けコンテキストから取り出され、要素ではなくビューポートに相対的になります。の背景画像。

これを回避するには、基本的にバックグラウンドアタッチメントを使用する必要があります。JSのスクロールイベントにスクロールしてイベントリスナーをバインドする必要があります。これは、固定サイズをシミュレートするためにウィンドウがスクロールされた距離配置はできますが、バックグラウンドサイズを計算します：ビューポートではなくコンテナ要素を基準にしてカバーします。