Question

我想在导航栏下方添加一个背景图片（窗口大小为全宽）。它不应该覆盖整个页面长度，而是从导航栏菜单下方开始，然后向下到特定的指定高度。（但宽度已满）。

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

这是我到目前为止编码但没有结果：

HTML：

random_number = random.choice('123456')

CSS：

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

现在看起来像这样：

我想要这样的事情：

非常感谢任何帮助。

Answer 1

我已经尝试过您的代码了。尝试更改此行：

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

以下是其有效的证明：

Answer 2

浮动内容的主要问题是，其父级不会随之调整大小。

将overflow: auto设置为float: right即可解决此问题。

但我建议跳过ul#menu li规则中的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; }（如下面的第2个示例所示）

＆＃13;

<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

＆＃13;

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;
}

＆＃13;

没有浮动的样本

＆＃13;

<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

＆＃13;

{{1}}

＆＃13;

Answer 3

试试这个，背景位置存在问题，

std::unique_ptr<T, decltype(destroy_T)>(arg, destroy_T)

Answer 4

我认为你应该将导航放在div中，将图像放在另一个div中，这样它们就会分开

Answer 5

好吧，我做了一些不专业的事情。我已经设置好背景图片了。我只是更改了导航栏的颜色。

//在CSS中，我这样做了

.navbar-expand-lg
{
    background: #FEFEFE;
    box-shadow: 0 5px 10px #545b62; // just adding some shadow in the box
}

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

5 个答案: