这是一张背景图，我想把圈起来的两个地方抠出来，然后背景图做成宽度100%，高度自动适应，auto。然后我抠出来的这两张图，用<img src>显示在页面上，然后去和这个背景图完全重叠。要考虑到各种屏幕，各种分辨率，就是屏幕随意改变，然后看起来还是一张图。




我把第一张图命名为a1.png 第二张图命名为a2.png 第三张图命名为bg.png

.test{

        position: fixed;

        top: 0;

        bottom: 0;

        right: 0;

        left: 0;

        background: url("bg.png") no-repeat #ddf7ff;

        background-size: 100% auto;

        height: 100%;

        width: 100%;

        display: flex;

        flex-direction: column;



        align-items: center;*/

      }

.a1 {position:absolute;top: 10.3%;left: 53.4%;}

.a2{position:absolute;top:10.1%;left: 47.57%;}

然后html代码如下

<div class="test">

<div class="a1"><a id="a1"><img src="a1.png" /></a></div>

<div class="a2"><a id="a2"><img src="a2.png" /></a></div>

</div>

这样子，做的时候，在某个分辨率下面，是可以完全重叠的，但是我浏览器缩放有，位置就改变了，我怎么才能实现，浏览器任意缩放，a1,a2这两张图，刚好在抠出来的位置，完全重叠，看起来还是一张完整的图。