关于css样式 自适应和绝对定位 的一点理解

本文介绍了一种使用JS+CSS实现网页自适应布局的方法。通过调整body标签的position属性及内部img标签的尺寸,实现背景图片自适应。此外,通过设置绝对定位和百分比尺寸,确保页面元素如按钮等随背景图片缩放而保持一致的比例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题描述:
拿到一副完整的效果图,在切图之后需要利用js+css布局实现该效果。有两个棘手的问题待解决。1 如何做才能使背景图片实现自动填充的效果,即图片自适应。2 如何实现相应的功能按钮或者样式随着背景图片大小缩放,保持缩放比例不至于乱了样式。
解决办法:
1 给背景 body标签,设置 position为relative。body标签之内放置img标签,使其 width:100%,height:100%;即可实现图片自适应填充满屏幕。
2 比如在这个背景层上放置一个按钮(实质是div里包含的img标签)。可以给该div设置 position为absolute;(相对于父元素即body要实现该标签的绝对定位)width:30%;(该div的大小) height:30%(在父容器的30%高度处)left:15%;(在父容器的距左边距15%处)由此便实现了不论父容器怎么变,缩放比例保持不变,进而能很好的适应各种屏幕大小。
注:如果图片不能完全填充满,下面或上边多条线时,可尝试给body填充一个背景色(图片底部的颜色)。
下面是切图
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
下面是最终效果图
这里写图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值