css：絶対位置の応答画像が重複しています

Question

私は背景画像を持つ2つのdivを持っていますが、両方のdivは同じ画像を持っていますが、それぞれ異なる色です。画像は波形です

div1の画像は灰色で、div2の画像は緑です。

何が行われなければならないのは、開始時にimage1のdivが表示されることです。 div2は表示されません（幅は0に設定されています）。 ページ上で何かが起こり、進行状況が表示されなければなりません。 div2の幅は、進行状況によってJavascriptで増加し、div1をカバーします。

だから目標は、次に緑色画像、残りをグレー画像を示す

空間の進捗X％に対してdepeningしたがって、両方のdivは、同じ位置にある必要があり、コースの同じ大きさを必要とするということです。

それがどのように見えるかの

例：

私はこのようにそれを試してみました：

HTML：

<div class="left" id="container"> 
        <div class="image original" style="background-image: url(/PATH/TO/IMAGE)"> 
        </div> 
        <div class="image green" style="background-image: url(/PATH/TO/IMAGE_GREEN)"> 
        </div> 
</div> 

CSS：

.image { 
    position: absolute; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    background-repeat: no-repeat; 
} 



    #container{ 
     position: relative; 

     .original { 
     width: 100%; 
     } 

     .green, .blue{ 
      width: 0%; 
     } 
    } 

Javascriptを使用すると、緑色の幅が広がります。 これは既に動作しますが、私の問題は、背景画像がdivコンテナよりも大きくなったことです。そのため、divコンテナには画像全体が表示されません。 私は、全体のイメージはdivの中に含まれるように.imageクラスに

background-size: 100% auto 

を追加する必要があります。

しかし、もしそうすれば、イメージは反応するでしょう。ですから、div2の幅を0から100％に増やすと、div2の背景画像はdiv2のコンテナ内で画像全体が圧縮されるため、この処理中にdiv1の背景画像と正確に重ならないでしょう。

それからそれは次のようになります。

しかし、彼らは一致する必要があります。

どうすればこのようなことができますか？

Answer 1

進捗率の割合に従って水平に色付けされた背景画像のようなプログレスバーを作成するように思えます。

HTML：：

<div class="progress"></div> 

CSS：

.progress { 
    width:800px; 
    height:150px; 
    border:10px solid #555; 
    background-image: 
    linear-gradient( 
     to right, 
     rgba(0, 255, 0, 0.45), 
     rgba(0, 255, 0, 0.45) 50%, 
     rgba(0,0,0,0) 50%, 
     rgba(0,0,0,0) 
    ), 
    url('https://placeimg.com/800/150/animals/grayscale');  
} 

むしろ2つのdivを使用するよりも、背景画像と透明勾配の両方を持っている1つのdivを使用して、このような勾配をアニメーション化する方が簡単かもしれません

次に、background-imageプロパティに、JSを使用してグラデーションを透明に変更する場所の新しい値を割り当てることができます。 JSを使用して

全例： http://codepen.io/zesposi/pen/apyNGq