手机页面全屏背景如何处理（background-size:cover）

刚开始接触手机端的前端页面，今天做一个页面的时候碰到的问题，就是如何设置背景图片才能在各个尺寸的手机屏幕上整屏显示。

第一反应是用background-size:100% 100%;

实验了一下发现在图片尺寸比屏幕尺寸小的时候，还是没有办法覆盖全屏。

背景图的尺寸应该用多大合适呢？

去网上搜了一下手机页面的设计素材，

发现都是用的640X1136的尺寸，

也就是Iphone5的屏幕分辨率尺寸。

自己做了一张该尺寸的背景图实验了一下，

background-size:cover;

可以在各个屏幕全屏覆盖。

此属性可等比扩展图片来填满元素，即cover值。

手机页面若不考虑ie9以下的兼容问题，这个简单的属性可以解决手机端页面的背景图片全屏覆盖问题。

转载于:https://www.cnblogs.com/mistyrain/p/4910902.html