javascript - css:重叠具有绝对位置的响应图像

Question

我有两个带有背景图像的 div，这两个 div 具有相同的图像，但每个具有不同的颜色。图片是波形

假设 div1 的图像是灰色的，div2 的图像是绿色的。

必须做的是在开始时显示带有 image1 的 div。 div2 不可见(宽度设置为 0)。 然后页面上会发生一些事情，必须显示进度。 然后根据进度用Javascript增加div2的宽度覆盖div1。

因此目标是根据进度，X% 的空间显示绿色图像，其余部分显示灰色图像

因此，两个 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 容器中可见。 我必须添加

background-size: 100% auto

到 .image 类，以便整个图像包含在 div 中。

但如果我这样做，图像就会有响应。因此，如果我现在将 div2 的宽度从 0 增加到 100%，则在此过程中，div2 的背景图像将不会与 div1 的背景图像完全重叠，因为整个图像被压缩在较小的 div2 容器中。

然后它看起来像这样:

但他们需要匹配。

我怎样才能实现这样的目标？

Answer 1

听起来您想创建一个进度条，它看起来像一个背景图像，根据进度完成的百分比水平着色。与其使用 2 个 div，不如使用 1 个同时具有背景图像和透明渐变的 div，并像这样设置渐变动画:

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

然后您可以使用 JS 为渐变应更改为透明的位置重新分配新值的 background-image 属性。

使用 JS 的完整示例: http://codepen.io/zesposi/pen/apyNGq