視差影響不工作在Firefox

所以首先，我不是一個專業的編碼器，但我有一些的經驗。我正在嘗試做一個現代化的好視差網站。所以我的問題是，後臺的圖像不會顯示在Firefox中，但它在Chrome中，我希望它在兩個工作。這裏是我的代碼：視差影響不工作在Firefox

//No js yet

#welcome { 
 
    font-family: 'Nunito', sans-serif; 
 
    font-size: 80px; 
 
    margin: 0px; 
 
    color: #000; 
 
    font-family: 'Slabo 27px', serif; 
 
    background-color: #D5D5D5; 
 
    height: 1000px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 1000px; 
 
    text-shadow: 0px 0px 10px grey; 
 
    border-top: 1px solid black; 
 
} 
 

 
body { 
 
    background-color: #000; 
 
    font-family: 'Slabo 27px', serif; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
#parallax { 
 
\t background-image: url("http://wp.widewallpapers.net/4k/cities/new-york/3840x2160/New-York-3840x2160-001.jpg"); 
 

 
    min-height: 100%; 
 
\t margin: 0px; 
 

 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" href="style.css"/> 
 
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> 
 
    <meta content="-1" http-equiv="expires"></meta> 
 
    <meta content="text/html; charset=utf-8" http-equiv="content-type"></meta> 
 
</head> 
 
<body> 
 
<div id="parallax"></div> 
 
<center><p align="center" id="welcome">Welcome To My Website!</p></center> 
 
</body> 
 
</html>

所以，如果你複製一切，嘗試在鉻它的工作原理（每個人我認爲），但它不工作在Firefox。幫幫我！

來源

2017-01-26 JUSTSOMERANDOMGUY

在一個側面說明了''

標籤已被棄用（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center）。有很多事情可以幫助實現對中。這裏是一個很好的資源：http://howtocenterincss.com/ – zik

我也有這個問題。有一個CSS Only視差演示網站：https：//alligator.io/css/pure-css-parallax/，在Firefox以外的其他任何瀏覽器上都能正常運行。 –

簡單易用的解決方法是添加height: 100%到body{}

body { 
    background-color: #000; 
    font-family: 'Slabo 27px', serif; 
    padding: 0px; 
    margin: 0px; 
    height: 100%; 
}

附加選項：

變化min-height到height.

#parallax { 
    background-image: url("http://wp.widewallpapers.net/4k/cities/new- york/3840x2160/New-York-3840x2160-001.jpg"); 
    height: 100%; 
    margin: 0px; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

變化min-height: 100%到min-height: 580px;（或任何像素你想要的）。

#parallax { 
    background-image: url("http://wp.widewallpapers.net/4k/cities/new- york/3840x2160/New-York-3840x2160-001.jpg"); 
    min-height: 580px; //or whatever pixel you want... 
    margin: 0px; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

來源

2017-01-26 16:19:23

視差影響不工作在Firefox

回答

相關問題