在具有固定纵横比的背景图像上使用 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。