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のみの視差デモサイト（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-heightheight.

01へ

#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: 580px;に変更min-height: 100%（または任意のピクセルしたい）。 ``

タグが廃止されたサイドノートで

#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で視差が働いていません

答えて

関連する問題