Q

在导航栏正下方添加背景图像

html
css

2016-06-26 57 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

相关问题