background-attachment:fixed;在iphone上失效的问题

 iphonex上的效果

产生问题的原因:

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

固定背景导致重绘的成本很高,并且滚动表现也不尽人意,所以在一些移动端是被禁止的。

解决方案:

body{
  background: #0c60a6 url(../img/body_bg.jpg) no-repeat top;
  background-size:750*@fs1 1624*@fs1;
  height: 100%;
  min-height: 1268*@fs1;
  /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  font-size: 22*@fs1;
}
body:before{
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: inherit;
    background-size:750*@fs1 1624*@fs1!important;
    -webkit-background-size: 750*@fs1 1624*@fs1!important;
    -o-background-size:750*@fs1 1624*@fs1!important;
}

  

相关问题文章

博客

原文地址:https://www.cnblogs.com/GoTing/p/13965642.html