背景画像がフェードインしていない（ただし、ナビゲーションバーは）

私の背景画像はフェードインしていませんが、ナビゲーションバーはあります。（私は私の背景画像がフェードインしたいとナビゲーションバーがないように）背景画像がフェードインしていない（ただし、ナビゲーションバーは）

ここではHTMLは事前に

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #272727; 
 
} 
 

 
body.home { 
 
    background-image: URL("Homebc.png"); 
 
    background-size: cover; 
 
    -webkit-animation: fadein 2s; 
 
} 
 

 
@-webkit-keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
}

<body class="home"> 
 
    <div> 
 
    <header="navbar"> 
 
     <div> 
 
     <a class="logo" href="Index.html"> 
 
      <img src="brandlogoNAV.png" height="57.6px" width="190px"> 
 
     </a> 
 
      <ul> 
 
      <li><a class="active" href="Index.html">HOME</a></li> 
 
      <li><a href="About.html">ABOUT</a></li> 
 
      <li><a href="Approach.html">OUR APPROACH</a></li> 
 
      <li><a href="Contact.html">CONTACT</a></li> 
 
      </ul> 
 
     </div> 
 
    </header> 
 
    </div>

感謝です！

出典

2017-11-02 TimothyKA

すべてがあまりにも長い間、あなたが 'body'タグにあなたのキーフレームアニメーションを宣言しているように退色されます。また、この種のアニメーションを背景画像に適用することはできません。なぜなら、アニメーションやトランジション効果を適用することは可能ですが、ロードされた後はサーバーから最初に要求してロードする必要があるからです。あなたはjavascriptと同様の何かを達成することができるかもしれませんが、私はこの質問の範囲を超えると思う。 – UncaughtTypeError

身体の背景をアニメートすることはできず、コードにも問題があります。あなたのCSSファイルドンで、その後

<header class="navbar">

で身体セレクタを

<header="navbar">

：あなたが行を置き換える必要があり、

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #272727; 
 
} 
 

 
.home { 
 
    background-image: url("https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg"); 
 
    background-size: cover; 
 
    height: 100vh; 
 
    width: 100vh; 
 
    -webkit-animation: fadein 2s; 
 
} 
 

 
@-webkit-keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
}

<body> 
 
    <div class="home"> 
 
     <header class="navbar"> 
 
      <div> 
 
       <a class="logo" href="Index.html"> 
 
        <img src="brandlogoNAV.png" height="57.6px" width="190px"> 
 
       </a> 
 
       <ul> 
 
        <li><a class="active" href="Index.html">HOME</a></li> 
 
        <li><a href="About.html">ABOUT</a></li> 
 
        <li><a href="Approach.html">OUR APPROACH</a></li> 
 
        <li><a href="Contact.html">CONTACT</a></li> 
 
       </ul> 
 
      </div> 
 
     </header> 
 
    </div> 
 
</body>

出典

2017-11-02 08:20:19

まず下記のお試しコード - 対応する末尾が}です。

さらに、ボディの背景をアニメーション化することはできません。他のすべてのタグの含む親タグ -

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #272727; 
 
} 
 
body.home { 
 
    background-image: url("http://via.placeholder.com/350x150"); 
 
    background-size: cover; 
 
    -webkit-animation: fadein 2s; 
 
} 
 

 
@-webkit-keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
}

<body class="home"> 
 
    <div> 
 
    <header class="navbar"> 
 
      <div> 
 
       <a class="logo" href="Index.html"> 
 
       <img src="http://lorempixel.com/400/200" height="57.6px" width="190px"> 
 
       </a> 
 
       <ul> 
 
       <li><a class="active" href="Index.html">HOME</a></li> 
 
       <li><a href="About.html">ABOUT</a></li> 
 
       <li><a href="Approach.html">OUR APPROACH</a></li> 
 
       <li><a href="Contact.html">CONTACT</a></li> 
 
       </ul> 
 
      </div> 
 
     </header> 
 
    </div> 
 
</body>

出典

2017-11-02 08:27:17

背景画像がフェードインしていない（ただし、ナビゲーションバーは）

答えて

関連する問題