Question

我试图制作全屏背景图片。我可以做到这一点，但问题是，我无法保留我的顶部/导航栏。

这是一个模板，但我做了很多不同。

我对HTML / CSS很陌生，所以请耐心等待。我该如何继续前进？

PS：图像现在填满整个屏幕，但下面有一个导航栏 - 也是标题图片（徽标）

这是我的HTML代码：

<html>
  <head>
    <title>Adem Ökmen Photography</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=no">
    <link href="../layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body id="top">

    <!-- Top Background Image Wrapper -->
    <div class="bgded2" style="background-image:url('../images/demo/backgrounds/adem%20black.png');">

      <header id="header" class="hoc clear">
        <div id="logo">
          <h1><i class="fa" > </i> <a href="../index.html"></a></h1>
        </div>
        <!--navi bar-->
        <nav id="mainav" class="fl_left">
          <ul class="clear">
            <!--"Hjem" tab-->
            <li><a href="../index.html">Hjem</a></li>
            <!--Galleri tab-->
            <li class="active"><a class="drop" href="gallery.html">Galleri</a>
              <ul>
                <!--"#" er link  ... drop down-->
                <li><a href="gallery.html">Udvalgte</a></li>
                <li><a href="wedding.html">Bryllup</a></li>
                <li><a href="portrait.html">Portræt</a></li>
                <li><a href="outside.html">Udendørs</a></li>
              </ul>
            </li>
            <li><a href="contact.html">Kontakt</a></li>
            <li><a href="partyPrice.html">Festfotografering priser </a></li>
            <li><a href="portrait1.html">Portrætfotografering priser</a></li>
            <li><a href="printPrice.html">Priser på billedprint</a></li>
          </ul>
        </nav>
      </header>

    </div>
    </div>

    <header id="imageFull" class="hoc clear">
      <!--navi bar -->
      <nav id="mainav2" class="fl_left">
        <ul class="clear">
          <div id="bg">
            <img src="../images/demo/gallery/Amnah-2.jpg">
          </div>
        </ul>
      </nav>
    </header>

    <!-- JAVASCRIPTS -->
    <script src="layout/scripts/jquery.min.js"></script>
    <script src="layout/scripts/jquery.backtotop.js"></script>
    <script src="layout/scripts/jquery.mobilemenu.js"></script>
    <!-- IE9 Placeholder Support -->
    <script src="layout/scripts/jquery.placeholder.min.js"></script>
    <!--/ IE9 Placeholder Support -->
  </body>
</html>

这里我的CSS的一部分输入代码;

#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}

Answer 1

根据代码的外观，您将背景图像设置为错误的div。也许改为var express = require('express'); var session = require('express-session'); var app = express(); app.use(session({myVar: 'abc'})); app.get('/',function(req,res){ var sess = req.session; console.log(sess); });或background-image CSS的html部分。这样你的导航栏也应能够正确显示。

希望这会有所帮助：）

Answer 2

首先，你的背景需要在身体或导航上方的某个元素上。第二 - 尝试不使用固定在背景图像上的位置（使用background-attachment：fixed）

所以你可以这样做：

body{
  background: silver url(...) no-repeat;/*remove silver and fill the proper url*/
  background-size: cover;
  background-attachment: fixed;
}

header{
  background-color: red;
  padding: 10px;
  width: 200px;
  height: 200px;
}

nav{
  background-color: blue;
  padding: 10px;
  width: 180px;
  height: 10px;
}

<body>
  <header>
    <nav>
      Some navigation here...
    </nav>
    Header section here....
  </header>
  body section here....
</body>

使用background-attachment: fixed滚动时，背景图像将保持静态，只有内容会滚动。

全屏图像 - 但保持导航栏

2 个答案: