如何在我用作背景的img标签上显示我的导航栏？

时间：2017-12-30 22:51:15

标签： html css navbar

我是HTML / CSS的新手，我正在尝试创建我的投资组合。 我会让代码简单地说出来。请注意我只是复制了我认为与此问题相关的代码;如果您需要其他代码，请告诉我。

HTML代码： - 

<div class="NeroCorp">
        <ul id="nav-bar">
            <li><a href="#AboutMe">About Me</a></li>
            <li><a href="#WhatIDo">WHAT I DO</a></li>
            <li><a href="#Hobbies">HOBBIES</a></li>
            <li><a href="#Work">WORK</a></li>
        </ul>
        <img src="Images/sea.jpg">
        <div class="NeroTitle">NERO CORP DEVELOPMENT</div>
    </div>
    <div class="flex-container">
        <div class="SubTitleHolder">
            <h2 class="SubTitle">ABOUT ME</h2>
        </div>
        <div class="SubTitleHolder info1">
            <p><a id="AboutMe">
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<br><br>
                TITLETITLETITLETITLETITLETITLETITLETITLETITLETITLETITLETITLETITLETITLE
                TITLETITLETITLETITLETITLETITLETITLETITLETITLETITLETITLETITLETITLETITLE
            </a></p>
        </div>
    </div>

CSS代码： - 

#nav-bar{
    text-align: center;
}

#nav-bar li{
    display: inline;
}

#nav-bar a{
    text-decoration: none;
    padding: 0 30px;
}

body{
    font-family: monospace;
    font-size: 16px;
    margin: 0 auto;
    text-align: center

}

这就是我目前所拥有的。 This is what I have currently

这就是我想要实现的目标。 enter image description here

所以基本上，我想将导航放在我用作背景的图像标签上。我尝试在导航栏上使用绝对位置，但它不能让我的导航栏居中。我可以理解使用img标签作为背景图片的不良做法，但我不知道如何克服这个问题。我正在使用img标签作为背景，因为我将有许多不同的图像作为背景作为网站的不同部分。

任何指导都非常感谢。

3 个答案:

答案 0 :(得分：0)

最好使用background-image，您可以像在img中一样在HTML中插入图片网址，这样您就可以拥有不同背景的不同部分。然后使用CSS更容易处理，例如，您可以使用伪元素在其上方添加叠加来控制对比度：

＆＃13;
＆＃13; 
#nav-bar {
  text-align: center;
}

#nav-bar li {
  display: inline;
}

#nav-bar a {
  text-decoration: none;
  padding: 0 30px;
}

body {
  font-family: monospace;
  font-size: 16px;
  margin: 0 auto;
  text-align: center
}

.back {
  position: relative;
  padding-top: 1px;
  height: 100vh;
  /* Control the image*/
  background-size: cover;
  background-position: center;
  /**/
}

.back .NeroCorp {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height:100%;
}

.NeroTitle {
  margin-top: auto;
  margin-bottom:50px;
}


/* Overlay above the image */

.back:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.4);
  z-index: 0;
}
＆＃13; 
<div class="back" style="background-image:url(https://lorempixel.com/1000/600/)">
  <div class="NeroCorp">
    <ul id="nav-bar">
      <li><a href="#AboutMe">About Me</a></li>
      <li><a href="#WhatIDo">WHAT I DO</a></li>
      <li><a href="#Hobbies">HOBBIES</a></li>
      <li><a href="#Work">WORK</a></li>
    </ul>
    <div class="NeroTitle">NERO CORP DEVELOPMENT</div>
  </div>
</div>
<div class="flex-container">
  <div class="SubTitleHolder">
    <h2 class="SubTitle">Section 1</h2>
  </div>
  <div class="SubTitleHolder info1">
    <p><a id="AboutMe">
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<br><br>
               
            </a></p>
  </div>
</div>
<div class="flex-container">
  <div class="SubTitleHolder">
    <h2 class="SubTitle">Section 2</h2>
  </div>
  <div class="SubTitleHolder info1">
    <p><a id="AboutMe">
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
                TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<br><br>
               
            </a></p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

在你的情况下，看起来你可以添加位置：绝对的导航栏  类似的东西：

#nav-bar{
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
}

据我了解，你为#NeroTitle写了一个类似的风格 但是您的图像对于不同的设备将具有不同的高度。我认为最好在背景中移动背景图片，背景大小为：cover。然后，您将能够控制#NeroCorp块高度 另外，了解如何在屏幕上制作内容的最佳方法是阅读代码。您始终可以打开开发人员工具并检查css以查找要用于您网站的元素。

答案 2 :(得分：0)

嗯，你有几个选择：

让导航栏绝对定位

这是我说的标准方式。你提到过这个，并说你有问题集​​中在一起吗？只要你不忘记让它拉伸整个宽度，这应该不是问题：

div {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
<div>This is centered</div>

使您的图像（-container）绝对定位

你可以为容器做同样的事情，但如果你想要它下面的东西，你可能需要作弊。

html, body {
  margin: 0;
}

.bg-img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
<div style="color:blue;">Now you can put anything over it</div>

<img src="http://www.placecage.com/1000/800" class="bg-img">

实际上使用背景图像并使用js

将其切换出来

您还提到过，您想要切换背景，那么为什么不使用js。但是你无法为它们制作动画，这就是为什么我最后提到它。

(function() {
  const images = [
    "http://www.placecage.com/500/500",
    "http://www.placecage.com/500/1000",
    "http://www.placecage.com/1000/500",
    "http://www.placecage.com/1000/1000"
  ];
  let i = 0;

  function nextBg() {
    document.body.style.backgroundImage = "url(" + images[i] + ")";
    ++i;
    if (i === images.length)
      i = 0;
  }

  nextBg();
  setInterval(() => {
    nextBg();
  }, 5000);
})();

相关问题
最新问题