H5活动页面布局,按钮使用定位固定位置,如何适配多种分辨率?
各位大佬,请问:一张背景图,按钮是里面的一个元素,如何在不同机型不同分辨率下按钮都会出现背景图上面的固定位置?rem、百分比、px 都试过了好像都不行!
<style>
body{
font-size: 18px;
}
.box{
height: 100vh;
width: 100vw;
background-image:url('/static/redCloud/images/buyerEvents.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
position: relative;
}
.box .get_btn{
width: 7rem;
position: absolute;
right: 3rem;
bottom: 19rem;
}
</style>
<body>
<div class="box">
<img class="get_btn" src="/static/redCloud/images/buyerBtn.png" alt="立即领取">
</div>
</body>
回复
1个回答
test
2024-06-26
话用 @media 吧,会稍稍麻烦一些,
更简单的办法:按钮做到图里面,整整一个足够大的透明按钮,
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容