如何在導航欄後面顯示圖像

對於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>

來源

2017-02-17 L. Dexter

請出示你有什麼到目前爲止已經試過。 –

@BishalSapkota剛剛添加了它 –

放置圖像的DOM元素，你可以使用，背景圖像的CSS屬性的背景。例如 background-image：url（'https://static.pexels.com/photos/87646/horsehead-nebula-dark-nebula-constellation-orion-87646.jpeg'）;

W3School有關於CSS屬性的很棒的文檔。 here is the link

來源

2017-02-17 02:57:48

這篇文章有幫助，並且我注意到我在CSS中的圖像URL不起作用，但是如何獲取圖像底部的導航欄？ –

你可以設置風格位置：絕對;對於你的導航元素，當你希望你的元素在另一個元素周圍浮動時。那麼你可以使用頂部，底部，左側，右側來定位x，y https://www.w3schools.com/css/css_positioning.asp –

#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>

簡單的例子

來源

2017-02-17 03:47:57 arturmoroz

如何在導航欄後面顯示圖像

回答

相關問題