4

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のみのソリューションです。

4

2 に答える 2

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

于 2015-04-28T10:10:56.633 に答える
0

jQuery の代替background-attachment:fixed;(jQuery が適切にインストールされていることを確認してください):

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

背景画像は div の高さよりも高くしてはいけません。

于 2014-08-08T20:46:36.047 に答える