CSSWeb前端之路

在vue中使用背景图时,在屏幕大的手机上底部会出现空白区域

2019-08-28  本文已影响0人  别摸_兜里有糖
这是在iPhoneX显示的效果,底部有明显的留白

解决方法:

    使用背景图的元素的CSS设置:

        position:absolute;

        top:0;

        right:0;

        bottom:0;

        left:0;

        width:100%;

        background:url("./img/bg.png")no-repeat;

        background-size:100% 100%;  

        box-sizing:border-box;

错误原因:

        重点:之前出现留白的原因是我将  background-size:100% ;只设置了一个100%,写成两个就好了

上一篇 下一篇

猜你喜欢

热点阅读