问题描述:
拿到一副完整的效果图,在切图之后需要利用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填充一个背景色(图片底部的颜色)。
下面是切图
下面是最终效果图
关于css样式 自适应和绝对定位 的一点理解
最新推荐文章于 2025-07-18 14:16:18 发布