視差功能 - Html/Css

我正在我的個人網站上工作。視差功能 - Html/Css

我不明白爲什麼視差功能的圖像沒有出現在除了瀏覽器之外的任何東西。

例如，在我的手機上它不起作用，在Safari瀏覽器上它不起作用。

一切都被正確標記。

我已經將bootstrap添加到文件中。

問題：This is the problem.... 預期結果：What I want (What appears on my chrome browser)

此溶液固定的問題Safari的，但不移動。

HTML：

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

舊的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：

/* 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; 
}

來源

2016-03-27 Dominique

請在此處添加有意義的代碼和問題描述。請不要鏈接到需要修復的網站 - 否則，一旦問題得到解決，或者您鏈接到的網站無法訪問，此問題將對未來的訪問者失去任何價值。發佈 [最小，完整和可驗證示例（MCVE）]（http://stackoverflow.com/help/mcve）顯示您的問題將幫助您獲得更好的答案。欲瞭解更多信息，請參閱 [我網站上的某些內容不起作用。我可以只粘貼一個鏈接嗎？]（http://meta.stackexchange.com/questions/125997/）謝謝！ – j08691

@ j08691，好的，我更新了我的問題。謝謝。 – Dominique

/* 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; 
}

背景尺寸：蓋;

解決問題。問題在於圖像在所有屏幕尺寸上都沒有適當調整大小。

來源

2016-05-27 17:42:02 Dominique

可悲的是我有太少的聲譽發佈這個，因爲它屬於的地方評論，所以我會把它作爲答案發布。檢出Can i use..，一個HTML5支持表。我懷疑使用EM，以及任何CSS後面的組合

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

成爲您的問題的原因。

來源

2016-03-28 17:09:27 ionree

所以...我試圖擺脫「flex flex-horizontal-center和flex-direction-col」，它現在似乎可以在Safari上運行。 HTML： '

' 但是它仍然無法在手機上正常工作。 – Dominique

移動版Safari通常使用舊版WebKit（渲染引擎），而移動版Chrome則使用相當新的版本，而移動版Chrome通常是最新最好的版本。如果支持移動Safari並非關鍵任務，我只能拭目以待。 – ionree

感謝您提供的信息，它確實很難讓每個設備都可用/看起來很好。 – Dominique

我認爲它不適用於手機上的Safari &，因爲您使用的是背景的簡寫。有些瀏覽器不完全支持它。
也許如果你拆分它可能工作的屬性。

上一個：

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

後：

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

來源

2016-03-28 17:10:46 Mamboleoo

所以沒有解決問題，但很高興知道。 – Dominique

視差功能 - Html/Css

回答

相關問題