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

问题描述：
拿到一副完整的效果图，在切图之后需要利用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填充一个背景色（图片底部的颜色）。
下面是切图




下面是最终效果图