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％，则在此procress期间div2的背景图像将不会与div1的背景图像完全重叠，因为整个图像被挤压在较小的div2容器中。

然后它看起来像这样：

但他们需要匹配。

我怎么能实现这样的目标呢？

Answer 1

听起来你想创建一个进度条，它看起来像根据完成进度的百分比水平着色的背景图像。使用包含背景图像和透明渐变的1 div并使用这样的渐变动画可能更容易，而不是使用2个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

css：具有绝对位置的重叠响应图像

1 个答案: