Q

在導航欄正下方添加背景圖像

html
css

2016-06-26 93 views 1 likes

1

我想在導航欄正下方添加背景圖像（具有完整的窗口大小寬度）。它不應該覆蓋整個頁面的長度，而是從導航欄菜單的下方開始，然後下降到特定的指定高度。（但寬度已滿）。在導航欄正下方添加背景圖像

我提到以下但仍然沒有結果： Starting a background image below navbar in Twitter Bootstrap。我也沒有使用任何Bootstrap。

這是我迄今編碼，但沒有結果：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Numberz</title> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700" rel="stylesheet" type="text/css"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    </head> 

    <body> 
    <nav> 

     <img src="image2.png" alt="numberz" width="218px" height="38px" style="margin-left: 100px; margin-top: 15px; float: left; display: inline-block;"> 

     <section style="margin-right: 150px;"> 
     <ul id="menu"> 
      <li><a href="#"><b>SIGNUP</b></a></li> 
      <li><a href="#"><b>LOGIN</b></a></li> 
      <li><a href="#"><b>ACCOUNTANTS</b></a></li> 
      <li><a href="#"><b>BLOG</b></a></li> 
      <li><a href="#"><b>FEATURES</b></a></li> 
      <li><a href="#"><b>PRICING</b></a></li> 
     </ul> 
     </section> 

    </nav> 

    <div id="backgroundimage"></div> //this is the division created for the background image 

    </body> 
</html>

CSS：

ul#menu li { 
display: inline-block; 
float: right; 
position: relative; 
margin-top: 28px; 
margin-left: 10px; 
margin-right: 35px; 

} 

ul#menu li a { 

text-decoration: none; 
color: #808080; 
font-family: "Helvetica Neue"; 
font-size: 15px; 
} 

#backgroundimage { 
background: url("image3.png"); 
width: 1024px; 
height: 500px; 
background-repeat: no-repeat; 
display: block; 
position: relative; 
background-position: 0 500px; 
}

現在它看起來是這樣的：

我想是這樣的：

任何幫助將不勝感激。

2016-06-26 Yoshita Arora

A

回答

2

我已經試過你的代碼。嘗試改變這一行：

#backgroundimage { 
background: url("image3.png"); 
width: 1024px; 
height: 500px; 
background-repeat: no-repeat; 
display: block; 
position: relative; 
background-position: 0 500px; 
}

這樣：

#backgroundimage { 
background-image: url("image3.png"); 
width: 100vw; 
height: 100vh; 
background-size: 100% 100%; 
background-repeat: no-repeat; 
position: relative; 
}

，然後添加到您的CSS：

nav 
{ 
overflow: auto; 
}

這裏有一個證明，它的工作原理：

2016-06-26 11:54:08

+0

謝謝噸，這工作！ :) –

+0

@YoshitaArora不客氣。祝你好運！ :) –

1

浮動內容的主要問題是，它的父級不與它的大小。

設置您的nav爲overflow: auto將解決該問題。

但我建議跳過float: right在ul#menu li規則（如下2.nd樣品中）

ul#menu li { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin-top: 28px; 
 
    margin-left: 10px; 
 
    margin-right: 35px; 
 
} 
 

 
ul#menu li a { 
 

 
    text-decoration: none; 
 
    color: #808080; 
 
    font-family: "Helvetica Neue"; 
 
    font-size: 15px; 
 
} 
 

 
#backgroundimage { 
 
    background: url("http://lorempixel.com/600/600/city"); 
 
    width: 1024px; 
 
    height: 500px; 
 
    background-repeat: no-repeat; 
 
    background-position: cover; 
 
}

<nav> 
 

 
    <img src="image2.png" alt="numberz" width="218px" height="38px" style="margin-left: 100px; margin-top: 15px; float: left; display: inline-block;"> 
 

 
    <section style="margin-right: 150px;"> 
 
    <ul id="menu"> 
 
     <li><a href="#"><b>SIGNUP</b></a></li> 
 
     <li><a href="#"><b>LOGIN</b></a></li> 
 
     <li><a href="#"><b>ACCOUNTANTS</b></a></li> 
 
     <li><a href="#"><b>BLOG</b></a></li> 
 
     <li><a href="#"><b>FEATURES</b></a></li> 
 
     <li><a href="#"><b>PRICING</b></a></li> 
 
    </ul> 
 
    </section> 
 

 
</nav> 
 

 
<div id="backgroundimage"></div> //this is the division created for the background image

樣品不浮動

ul#menu li { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin-top: 28px; 
 
    margin-left: 10px; 
 
    margin-right: 35px; 
 
} 
 

 
ul#menu li a { 
 

 
    text-decoration: none; 
 
    color: #808080; 
 
    font-family: "Helvetica Neue"; 
 
    font-size: 15px; 
 
} 
 

 
#backgroundimage { 
 
    background: url("http://lorempixel.com/600/600/city"); 
 
    width: 1024px; 
 
    height: 500px; 
 
    background-repeat: no-repeat; 
 
    background-position: cover; 
 
}

<nav> 
 

 
    <img src="image2.png" alt="numberz" width="218px" height="38px" style="margin-left: 100px; margin-top: 15px; float: left; display: inline-block;"> 
 

 
    <section style="margin-right: 150px;"> 
 
    <ul id="menu"> 
 
     <li><a href="#"><b>SIGNUP</b></a></li> 
 
     <li><a href="#"><b>LOGIN</b></a></li> 
 
     <li><a href="#"><b>ACCOUNTANTS</b></a></li> 
 
     <li><a href="#"><b>BLOG</b></a></li> 
 
     <li><a href="#"><b>FEATURES</b></a></li> 
 
     <li><a href="#"><b>PRICING</b></a></li> 
 
    </ul> 
 
    </section> 
 

 
</nav> 
 

 
<div id="backgroundimage"></div> //this is the division created for the background image

2016-06-26 11:37:32 LGSon

0

我想你應該只是把div的，導航及圖像於另一個股利，使他們走散

2016-06-26 11:43:40 brahimm

+0

你應該用一些代碼示例來說明。 –

1

試試這個，有一個與背景位置的問題，

#backgroundimage { 
background:url(1.jpg); 
margin-top:80px; 
margin-left:100px; 
width: 1024px; 
height: 500px; 
background-repeat: no-repeat; 
display: block; 
position: absolute; 
background-position:center; 
background-size:cover; 
}

2016-06-26 11:52:06 frnt

+0

謝謝這工作太:) :) –

+0

歡迎@YoshitaArora :-) – frnt

相關問題