由于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的解决方案。

最佳答案

    .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/

09-20 14:38