使用css覆盖图像，背景图像具有固定的宽高比

Question

我有这个CSS代码，它根据浏览器大小调整背景图像的大小，使图像的中心始终位于浏览器窗口的中心！现在的问题是我需要在中心添加另一个图像，就像圆圈中的图标一样，也遵循保持纵横比的相同规则！

如何应用相同的代码来保持第二张图像的宽高比？主要是，如何在中心添加覆盖背景的另一个图像？我还附上了使用Photoshop实现的背景图像！

CSS

    #stage {
      position:fixed;
      top:-50%;
      left:-50%;
      width:200%;
      height:200%;
    }

    #stage img {
      position:absolute;
      margin:auto;
      min-width:50%;
      min-height:50%;
      top:0;
      left:0;
      right:0;
      bottom:0;
    }

    @media screen and (max-width: 512px) {
      #stage img {
      width:100%;
      height:auto;
    }

HTML

    <div id=stage>
    <img src="cutest_child_in_the_world-wallpaper-5120x3200.jpg" />
    </div>

Answer 1

如果您要做的只是覆盖与第一个完全相同的另一个图像，那么您可以重新使用现有代码。添加另一个div与另一个图像，并将#stage ID更改为类。

第二张图片当然需要一些透明度才能看到第一张图片的任何内容......并且可能是完全相同的尺寸以达到预期的效果。

这是jsfiddle。