移动前端 background-image 带来的问题

Question

我要实现的一个看似很简单页面，页面只采用一张图片做为大背景，其他就什么都没有了 ；css 代码如下：

width: 100%;height:100%;background-image:url(../images/index.png);background-position:bottom;background-size:100%;position:absolute;

其中 background-position 设为 bottom 的原因是 目前的问题还没有真正解决 设置为bottom 至少能保证 图片最下面有一栏冠名能显示出来；

tip:只有一张图片；图片的高度为 750px；

所以带来的问题有如下几个：

1. 在大屏幕手机下 上下都能显示全，但是头部会有空白；

2. 在有些浏览器中 地址栏会遮挡图片；能隐藏地址栏的浏览器 向下滑动 图片能显示全；

3. 小屏手机 会遮挡 图片上面一部分，原因是 background-position 设置为了 bottom；如果设置为center的话 上下都会有遮挡

   想要实现的效果，按照屏幕自动缩放，如果屏幕高度不够 就滚动，至少不会有遮挡的问题；

   如果实在没有解决方案就用 media query 根据不同屏幕尺寸 采用不同的照片；目前 不想做多套图片~

   求大神解答~~

Answer 1

你可以试下，background-size：cover；