2016-04-07 36 views
0

Her bir değişken bölümün sabit bir arka plan görüntüsüne sahip olduğu ve içeriğin resmin üzerine kaydırılmasının gerektiği bir yanıtlama sitem var. Şu anda, iOS'ta, görüntünün küçük bir bölümüne yakınlaştırıyor ve içerik div'ına sığacak şekilde ölçeklendiriyor (temel olarak büyük bir gri arkaplanla sonuçlanıyor). IPhone tarayıcılarında da sabit bir arka plan üzerinde kaydırma bölümleri nasıl yapabilirim?Duyarlı site için kaydırma ile nasıl sabit bir arka plan oluştururum?

.scroll-background { 
    background: url("../imgs/misc.jpeg") no-repeat top center fixed; 
    background-size: cover; 
} 
.scroll-background2 { 
    background: url("../imgs/misc2.jpeg") no-repeat top center fixed; 
    background-size: cover; 
} 
.center{ 
    padding: 0 2em; 
    margin: 0; 
    position: relative; 
    top: 50%; 
} 

ve html:

İşte arka plan için benim geçerli kod var

*** DÜZENLEME Ben duyarlı şeyler her çıkartılır ettik ve sorunu buluyorum Görüntü, yalnızca içerilmesi gereken bölüm yerine tüm sayfaya ölçekleniyor olması, ancak yalnızca iOS'ta tarayıcıları kullanırken gerçekleşiyor olması. Örneğin. 'about' bölümü için arkaplan resmi, üç bölümün tümünü kapsayacak şekilde ölçeklenir ve arkaplanın büyütülmüş kısmı ilk bölümde gösterilir. Diğer bölümleri silersem, görüntü doğru boyuta ölçeklenir.

<body id="top"> 
     <section id="about"> 
     <div class="scroll-background center"> 
      <p> 
       Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu. 
      </p> 
     </div> 
     </section> 

     <section id="skills"> 
     <div class="center"> 
      <p> 
       Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu. 
      </p> 
     </div> 
     </section> 

     <section id="portfolio"> 
     <div class="scroll-background2 center"> 
      <p> 
       Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu. 
      </p> 
     </div> 
     </section> 
    </body> 

Teşekkür

Bu soruna benziyor
+0

HTML ve açılacak en az çevreleyen elemanlar – theblindprophet

+0

Maalesef CSS Need yardımcı olur! Bölüm için kod eklendi. – sasha

+0

Sanırım kodunuzun daha çoğunu, özellikle de görüntülerin kötü bir şekilde ölçeklenmesine neden olan bir his olduğum gibi duyarlı şeyler göstermeniz gerekebilir. – jskrwyk

cevap

0

ayarladığınız background-attachment: fixed; ve background-size: cover; özelliklerinin bir arada neden ediliyor.

Not: "... Ben OP'ın söz konusu background-attachment: fixed; özelliğini göremiyorum" Diğer en bu okuma ve düşünce olabilir kimin için netleştirmek için. Bu özellik background: ... no-repeat top center fixed; numaralı telefondan satır içi olarak ayarlanmıştır. Sonunda belirlenen son özellik olduğunu görebilirsiniz. Geri OP'ın sorusuna

: iOS birlikte kullanılmaktan background-size: cover; ve background-position: fixed; engelleyen bir sorunu var. caniuse.com, bir geçici çözüm olarak bir existing Stack Overflow question belirtmektedir.

Umarım bu :)