手机上网页背景图片无法正常显示的修复方法

无影人 — Mon, 31 Dec 2018 02:33:28 GMT

前两天在手机上访问shioko博客时发现网页底部有迷之白条，就像这样。

Chrome

Firefox

白条是手机浏览器渲染的问题，加载页面的时候只会渲染不包括地址栏那部分空间的图片，页面下滑隐藏了地址栏之后背景图跟着上移了，下面露出来的白条就是地址栏吃掉的那部分尺寸。

尝试着Google了一下，找到了一个解决办法。

在自己的博客上尝试了一下，完美的解决了问题。

body::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(https://co5.me/css/bk.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

修复后

另外，也许是 background-attachment: local;、background-size: auto; 的缘故，我的博客在手机上并没有出现白条的问题。

body {
  background-image: url('bk.jpg');
  background-attachment: local;
  background-repeat: repeat-y;
  background-position: 0 0;
  background-size: auto;
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
}

影子屋 (文章分类：解决办法)

手机上网页背景图片无法正常显示的修复方法