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

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这两张图,刚好在抠出来的位置,完全重叠,看起来还是一张完整的图。
...全文
225 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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>
用了个笨办法

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧