背景附件的替代品：固定答案

【问题标题】：Alternatives to background-attachment: fixed背景附件的替代品：固定
【发布时间】：2014-02-10 00:06:19
【问题描述】：

由于 background-attachment:fixed 在某些移动浏览器上不起作用（例如在 iOS 上），有什么替代方案，特别是在尝试实现以下演示时：http://cppforums.ludost.net/test/test.html

CSS：

.sec1 { 
  min-height: 1000px;
  background: #222 url('wallpaper-2959361.jpg') no-repeat center top fixed;
}

.sec2 { 
  min-height: 1000px;
  background: #222 url('wallpaper-1829278.jpg') no-repeat center top fixed;
}

HTML：

<div class="sec1">text</div>
<h1>Title 1</h1>
<div class="sec2">more text</div>
<h1>Title 2</h1>
<div class="sec1">even more text</div>

关于如何以适用于所有浏览器的方式实施演示有什么建议吗？最好是纯 CSS 解决方案。

【问题讨论】：

三件事要考虑。 1. 移动设备上的文件大小和加载时间。 2. 无论有没有它，它都来自您网站的一般结构。 3. 移动网站不必遵循与普通网站相同的结构。移动设备应该意味着该网站可以在手机上运行。

标签： html css background-attachment

【解决方案1】：

jQuery 替代background-attachment:fixed;（确保正确安装了 jQuery）：

$(window).scroll(function() {
     var scrolledY = $(window).scrollTop();
     $('.sec1').css('background-position', 'center ' + ((scrolledY)) + 'px');
});

请务必注意，您的背景图片不得高于 div 的高度，否则会被扔掉。

【讨论】：

【解决方案2】：

    .bg 
    {
      background-image: url(bg.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      z-index: -1;
      -webkit-transform: translateZ(0);
      pointer-events: none;
    }

请参阅此示例：https://rawgit.com/arnaudbreton/background-fixed-chrome-rendering-issue/master/index-without-rendering-issue.html

取自： http://blog.mention.com/building-a-beautiful-homepage-how-we-nailed-down-chrome-performance-rendering-issues/

【讨论】：