ナビゲーションバーの背後にある画像を取得する方法

Question

HTMLの初心者で、ナビゲーションバーを編集して、その画像の後ろに画像があり、ナビゲーションバーが画像の下にくるようにします。これはどうすればいいですか？

いくつかのフォーラムの投稿を見た後に、これは私が試したものです：

#cover { 
 
background-image: url("Images\FB Cover.png"); 
 
}

<div id="cover"> 
 

 
<div> 
 
<nav> 
 
<li><a href="Index.html">Home</a></li> 
 
<li><a href="About.html">About DRC</a></li> 
 
<li><a href="Products.html">Our Products</a></li> 
 
<li><a href="Contact.html">Contact</a></li> 
 
</nav> 
 
</div> 
 

 
</div>

Answer 1

使用できるDOM要素、背景画像のCSSプロパティの背景として画像を配置します。 例： 背景画像：url（ 'https://static.pexels.com/photos/87646/horsehead-nebula-dark-nebula-constellation-orion-87646.jpeg'）;

W3SchoolにはCSSプロパティに関する素晴らしいドキュメントがあります。 here is the link

Answer 2

#cover { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(http://lorempixel.com/800/600) no-repeat 50% 50%/cover; 
 
} 
 
menu { 
 
    position: absolute; 
 
    left: 20px; 
 
    bottom: 20px; 
 
} 
 
a { 
 
    color: #fff; 
 
}

<div id="cover"> 
 
    <menu> 
 
    <li><a href="Index.html">Home</a></li> 
 
    <li><a href="About.html">About DRC</a></li> 
 
    <li><a href="Products.html">Our Products</a></li> 
 
    <li><a href="Contact.html">Contact</a></li> 
 
    </menu> 
 
<div>

簡単な例