把一张图片抠出里面的两个元素，然后还能和背景在任何屏幕下保持完全重叠，有什么办法吗？

qq_15467669 2021-05-18 11:36:19

这是一张背景图，我想把圈起来的两个地方抠出来，然后背景图做成宽度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这两张图，刚好在抠出来的位置，完全重叠，看起来还是一张完整的图。

...全文

227 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_15467669 2021-05-18

打赏
举报


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.test{
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: url("t/bg.jpg") no-repeat #ddf7ff;
        background-size: 100% auto;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
.a1 {position:absolute;top: 12.3%;left: 16.7%;}
.a2{position:absolute;top:19.8%;left: 48.57%;}

    </style>
</head>
<body>
<div class="test">
<div class="a1"><a id="a1"><img src="t/a1.png" /></a></div>
<div class="a2"><a id="a2"><img src="t/a2.png" /></a></div>
</div>

</body>
</html>

三张图片的名称分别为a1.png a2.png bg.jpg 在宽度1920*1080的分辨率的显示器下，全屏显示就正常，如果把浏览器缩放到任意大小，就不能完全重叠了，我想在任意分辨率，任意大小的浏览器里面，都完全重叠显示。。。请大神指点。

qq_15467669 2021-05-18

打赏
举报

你这个确实实现了不变形，但是产生了一个新的问题，不能自动适应屏幕了。你这个有滚动条了。。。。

文盲老顾 2021-05-18

打赏
举报

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.test{
        position: block;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
		width:1920px;
		margin:0 auto;
		-webkit-transform-origin:left top;
      }
.bg {position:absolute;left:0px;top:0px;width:1920px;height:973px;background:url(https://img-bbs.csdn.net/upload/202105/18/1621311193_999061.jpg) no-repeat;}
.a1 {position:absolute;top:138px;left:334px;}
.a2 {position:absolute;top:218px;left:942px;}
 
    </style>
</head>
<body onload="var els = document.getElementsByClassName('test');els[0].style.transform='scale(' + (document.documentElement.clientWidth/1920) + ')';
">
<div class="test">
	<div class="bg"></div>
	<div class="a1"><a id="a1"><img src="https://img-bbs.csdn.net/upload/202105/18/1621311171_339698.png" /></a></div>
	<div class="a2"><a id="a2"><img src="https://img-bbs.csdn.net/upload/202105/18/1621311179_17355.png" /></a></div>
</div>
</body>
</html>

用了个笨办法