css：用绝对位置重叠响应图像

Question

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

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

必须做的是在开始时显示带有 image1 的 div。 div2 不可见（宽度设置为 0）。 然后页面上发生了一些事情，并且必须显示进度。 然后div2的宽度根据进度用Javascript增加并覆盖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