让背景图片适应不同比例屏幕，并在固定位置镶嵌透明按钮

起因

小白我最近遇到一个问题，美工老师画的界面比较偏动画，按钮都必须用图片代替，但光是一个按钮图片都会很大。如果每一个小模块都用图片代替的话，后期加载会非常慢。于是，想到一个解决方法，把所有导航、按钮等等小模块都放在背景图里，再在对应的地方放透明的按钮，在视觉上的效果像是点击了一个图片按钮，其实是点击了一个透明按钮。

在遇到这个问题之前，实现过类似的需求，但是是在移动端，微信小程序。但是在琢磨的过程中，发现web端和移动端不一样，照搬之前的方案行不通。

一、移动端

<view class="bgc" style="width:100%;height:100%;background-image: url('')">
</view>

page{
	height: 100%;
	position: relative;
}
.bgc {
	background-repeat:no-repeat; 
	background-size:100% 100%;
	-moz-background-size:100% 100%;
}

这样，移动端可以实现，不同的屏幕比例让背景图填充整个屏幕。
但是，在web端有点问题，因为div没有高度，撑不起来，完全看不到背景图。

二、Web端

1.让背景图适应不同比例的屏幕

首先，包裹两层div
第一层bg设置max-width为背景图的宽度。
第二层welcome设置背景图，padding-top设置为 背景图高度/高度 的百分比。同时设置background-size和background-position属性

<div class="bg">
	<div class="welcome"> </div>
</div>
</