首先,在CSS中,大家需要将html和body元素的高度都设置为100%。
html,body{ height: 100%; }
然后,在需要设置背景图片的元素中添加以下CSS代码:
background-size: cover; background-image: url('your-image-url'); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
这里的background-size属性设置为cover,可以让背景图片自适应屏幕大小,保持比例不变。background-repeat属性设置为no-repeat,防止图片重复显示。background-position属性设置为center center,让背景图片在元素中央显示。
为了兼容各个浏览器,大家还需要添加相关的前缀。-webkit-用于Chrome和Safari,-moz-用于Firefox,-o-用于Opera。
这样就可以轻松实现安卓背景图片满屏的效果了。