Question

我正在制作一个游戏网站，而且我遇到了一些文字位置问题。我想要实现的是将导航栏文本放在自定义导航栏背景上

<!DOCTYPE html>
 <html>
   <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">


  <style>
  body  {
     background-color: black;
     height: 100%;
     margin:0;
     padding:0;
   }    

 .topnav{
     position:absolute;
     text-align: center;
     margin:auto;
     width: 50%;    
  }

 .topnav a {
     line-height: 200px;
     padding: 50px;
     display: ;
     color: #f2f2f2;
     text-align: center;
     text-decoration: none;
     font-size: 17px;
  }

  .navbackground {
     position:absolute;
     top: -50px;
     left:0;
     right:0;
     bottom: 700px;
     margin:auto;
     width: 50%;    
  }

  .banner {
     position:relivent;
     top: 10px;
     left:0;
     right:0;
     bottom:0;
     margin:auto;
     width: 100%;
    }
 </style>
 </head>

 <body>


 <div class="topnav">
   <a class="active" href="#home">Home</a>
   <a href="#news">News</a>
   <a href="#contact">Contact</a>
   <a href="#about">About</a> 
 </div>

  <img src="nav.png" class="navbackground ">
  <img src="wallpaper.JPE" class="banner" >


  </body>
  </html>

我正在考虑在topnav课程中添加nav.png作为背景图片，但如果您没有正确缩放它或者有任何建议请让我知道，我似乎无法按比例缩放它。

ps ..我是CSS的新手，HTML请给我一些懈怠:)

Answer 1

即使是强大的z-index属性也可以工作（它控制元素如何相互堆叠），因为你已经声明自己是HTML的新手，你应该明白，实现你需要的最好的方法就是正确订购你的元素。

你现在有：

topnav
  link1
  link2
  link3
topnav background
webpage background

元素以您编写它们的方式呈现。因此，举例来说，为了让背景呈现第一个，你必须先写它。

webpage background -- this will be rendered first
topnav
  link1
  link2
  link3
topnav background

此外，对于topnav背景，您需要将它放在topnav之前。但是，如果你想要的是topnav相对于背景，你也需要嵌套它们：

webpage background
topnav background -- background is the parent of topnav
  topnav
    link1
    link2
    link3

这样，渲染的顺序是：

绘制网页背景
绘制topnav背景
绘制topnav（此处没有，只是占位符）
绘制链接

正如您所看到的，在这种情况下，您的topnav是没用的。您只需将背景应用于topnav并放弃topnav background元素：

webpage background
topnav -- here we apply the background using background CSS property
  link1
  link2
  link3

我希望说清楚。您可以使用z-index在不更改HTML的情况下获得相同的结果，但我建议首先使用明确的HTML和语义。

Answer 2

你必须设置z-index（导航更高一个）更多关于w3schools。

Answer 3

topnav{
   z-index: 1000;
}

您需要将z-index添加到Nav的父级。

Answer 4

你正在寻找这样的东西吗？ ;）

基本上在你的代码中，给你的.topnav{ ... }一个relative的位置+给它背景图像，就像我在这个小提琴中所做的那样。然后使用class="nav"创建一个新的html div并添加css .topnav .nav{ position: absolute; left: 10%; width: 80%; }，并为.topnav a添加line-height: 60px; width: 24%; display: inline-block;

的样式

我认为这几乎就像我改变了一样。

body {
  background-color: black;
  height: 100%;
  margin: 0;
  padding: 0;
}

.topnav {
  display: block;
  margin: 20px auto;
  width: 80%;
  height: 60px;
  background-image:url(https://i.stack.imgur.com/h54t6.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size:100%;
  position: relative;
}

.topnav .nav {
  position: absolute;
  left: 10%;
  width: 80%;
}

.topnav .nav a {
  line-height: 60px;
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  width: 24%;
}

.navbackground {
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  bottom: 700px;
  margin: auto;
  width: 50%;
}

.banner {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <body>
  <img src="https://cdna.artstation.com/p/assets/images/images/005/718/562/large/josh-bruce-headerfinal.jpg?1493246411" class="banner">
    <div class="topnav">
      <div class="nav">
        <a class="active" href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </div>
    </div>
  </body>

</html>

Answer 5

在我看来，将其设置为背景图像将是更好的选择。您可以使用设置为包含或覆盖的background-size CSS属性缩放背景图像（如果div和png的宽高比不匹配，则取决于您希望它的行为方式，请参阅https://www.w3schools.com/cssref/css3_pr_background-size.asp）。我建议不要缩放背景，而是建议在图像编辑器中缩放图像以匹配navigation-div的大小，或者设置div的尺寸以匹配您的png。对于背景图像也是如此。你可以把它变成身体的背景图像或周围的div。

以下是一个示例：https://jsfiddle.net/hg5jxn3s/7/

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
  body  {
     background-color: black;
     height: 100%;
     margin:0;
     padding:0;
     background: url(wallpaper.JPE) no-repeat top left;
     background-size: cover;
   }    

 .topnav{
   background:url(https://i.stack.imgur.com/h54t6.png) no-repeat top left;
   background-size: contain;
     position:relative;
     text-align: center;
     margin:0px auto;
     width: 900px;    
     height: 150px;
     padding:70px 0px;
  }

 .topnav a {
     line-height: 1em;
     padding: 0px 50px;
     color: #f2f2f2;
     text-align: center;
     text-decoration: none;
     font-size: 17px;
  }
 </style>
 </head>

 <body>


 <div class="topnav">
   <a class="active" href="#home">Home</a>
   <a href="#news">News</a>
   <a href="#contact">Contact</a>
   <a href="#about">About</a> 
 </div>


  </body>
  </html>

您会注意到我已将宽度从灵活（50％）更改为固定宽度。我之所以这样做是因为导航项目本身并没有在您的设置中缩放，所以在一定的尺寸下，它们会分成第二行，但这对于背景图像效果不佳。

如果将topnav的上述CSS更改为：

，您可以看到它的外观

.topnav{
    background:url(https://i.stack.imgur.com/h54t6.png) no-repeat top left;
    background-size: 100% 100%;
    position:relative;
    text-align: center;
    margin:0px auto;
    width: 50%;    
    height: auto;
    padding:70px 0px;
}

请参阅https://jsfiddle.net/hg5jxn3s/10/

导航栏位置在图像上方

5 个答案: