Paralaks özelliği - Html/Css

Question

Kişisel web sitem üzerinde çalışıyorum.

Paralaks özelliği için görüntülerin neden krom tarayıcı dışında bir şey üzerinde görünmediğini anlayamıyorum. Örneğin, telefonumda çalışmıyor ve safari tarayıcısında çalışmıyor.

Her şey doğru şekilde etiketlenmiştir.

Dosyaya önyükleme ekledim.

Sorun: This is the problem.... Beklenen sonuç: What I want (What appears on my chrome browser)

Bu çözüm Safari için sorun çözülmüştür, ancak mobil değil.

Html:

<div class ="body container"> 
    <!-- Parallax Feature --> 
</div> 
<div class="body container flex flex-horizontal-center flex-direction-col"> 
    <!-- Main Body --> 
</div> 

---

Eski Html:

<!-- Div class for the whole page. --> 
<div class="body flex flex-horizontal-center flex-direction-col container"> 

<!-- Home Page --> 
<!-- Parallax Feature --> 
<section class="parallax"> 
    <div class="parallax-inner"> 
    <h5>Dominique Charlebois</h5> 
    </div> 
</section> 
</div> 

css: Ne yazık ki, yani ait bir yorum olarak bu yazı için çok az bir üne sahip

/* Css Styling */ 

/* Global */ 
*{ 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
/* Body */ 
body{ 
    font-family: 'Roboto', sans-serif; 
    line-height: 1.6; 
    -webkit-box-shadow: inset 0 8px 4px -4px #ddd; 
    -moz-box-shadow: inset 0 8px 4px -4px #ddd; 
    box-shadow: inset 0 8px 4px -4px #ddd; 
} 
.body{ 
    padding-top: 15px; 
} 
/* Start Parallax */ 
/* Index */ 
.parallax{ 
    width: 100%; 
    height: 50%; 
    opacity: 0.8; 
    background: url("../images/IMG_UnicornCoders.jpeg") no-repeat fixed 50%; 
} 
.parallax-inner{ 
    margin-top: 5em; 
    padding-top: 25%; 
    padding-bottom: 25%; 
} 
h5{ 
    margin: auto; 
    text-align: center; 
    font-size: 275%; 
    color: #E5e5e5; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
} 

Answer 1

/* Start Parallax */ 
/* Index */ 
.parallax{ 
    width: 100%; 
    height: 50%; 
    opacity: 0.8; 
    background: url("../images/IMG_UnicornCoders.jpeg") no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
} 

Arka-boyutu: Kapak;

Sorunu giderin. Sorun, resmin tüm ekran boyutlarında uygun boyutta olmamasıydı.

Answer 2

Bu yüzden bir cevap olarak göndereceğim. Bir HTML5 destek tablosu olan Can i use..'a bakın. Ben em kullanarak kombinasyonunu yanı sıra

class="body flex flex-horizontal-center flex-direction-col container" 

arkasında oturur ne olursa olsun css senin sorunun nedeni gibi şüpheli.

Answer 3

Sanırım telefonunuzdaki Safari & üzerinde çalışmıyor çünkü arka planın kısayolunu kullanıyorsunuz. Bazı tarayıcılar tam olarak desteklemiyor.
Belki özellikleri bölüşerseniz işe yarayabilir.

alın

background: url("../images/IMG_UnicornCoders.jpeg") no-repeat fixed 50%; 

sonra:

background: 50% url("../images/IMG_UnicornCoders.jpeg") no-repeat; 
background-attachment: fixed;