起因
小白我最近遇到一个问题,美工老师画的界面比较偏动画,按钮都必须用图片代替,但光是一个按钮图片都会很大。如果每一个小模块都用图片代替的话,后期加载会非常慢。于是,想到一个解决方法,把所有导航、按钮等等小模块都放在背景图里,再在对应的地方放透明的按钮,在视觉上的效果像是点击了一个图片按钮,其实是点击了一个透明按钮。
在遇到这个问题之前,实现过类似的需求,但是是在移动端,微信小程序。但是在琢磨的过程中,发现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为背景图的宽度。