当前位置：极客笔记 > HTML > HTML 精选笔记 > HTML 有没有办法将这个导航栏放在这个自定义背景的后面

HTML 有没有办法将这个导航栏放在这个自定义背景的后面

HTML 有没有办法将这个导航栏放在这个自定义背景的后面

问题描述

我对HTML和CSS相对较新，正在为学校制作一个应用程序，但我的自定义背景与背景网格不太匹配。 以下是当前的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cool Hexagon Grid (interactive)</title>
</head>
<body>
<div class="container">
    <div class="topnav">
        <a class = active href="{{ url_for('home') }}">Home</a>
        <a href="{{ url_for('read') }}">Read</a>
        <a href="{{ url_for('create') }}">Create</a>
    </div>
    <h1>Cool Text Effect</h1>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
    <div class = "row">
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </div>
</div>
</body>

<style>

    *{
        margin: 0px;
        padding: 0px;
    }

    body {
        background-color: #000;
    }

    h1 {
        color:white;
        text-align: center;
        position: absolute;
        z-index: 5;
    }
.topnav {
  background-color: #333;
  overflow: hidden;
  z-index: 5;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Courier New', Courier, monospace;
  z-index: 5;

}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #5A5A5A;
  color: whitesmoke;

}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #333;
  color: #72bcd4;
}

    .row{
        display: inline-flex;
        margin-top: -32px;
        margin-left: -50px;
        z-index: 0;
    }

    .row:nth-child(even){
        margin-left: 2px;
    }

    .hexagon {
        width: 100px;
        height: 110px;
        margin: 2px;
        background-color: #111;
        clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%,
         0% 75%, 0% 25%);
         animation: animation 4s linear infinite;
         transition: 1s;
    }

    .hexagon:hover{
        background-color: #0f0;
        transition: 0s;
    }

    @keyframes animation {
        0% {
            filter: hue-rotate(0deg);
        }
        100%{filter: hue-rotate(360deg);}
    }

    .hexagon:after{
        content: '';
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 4px;
        right: 4px;
        background-color: #111;
        clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%,
         0% 75%, 0% 25%);
    }

    .hexagon:before{
        content: '';
        position: absolute;
        width: 50px;
        height: 100px;
        background-color: rgba(255, 255, 255, 0.03);
        z-index: 2;
    }
</style>
</html>

我期望设计无缝地背景需要遮挡住topnav， 对于我的代码有其他建议将不胜感激，因为我正处于学习阶段。 我尝试使用了z-index，但那是我能想到的仅有的与我有限技能相匹配的方法。

解决方案

你只需要将背景放在一个带有 overflow:hidden 属性的div中。 这是因为你在.row类上使用了负边距。

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #000;
}

h1 {
  color: white;
  text-align: center;
  position: absolute;
  z-index: 1;
}

.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Courier New', Courier, monospace;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #5A5A5A;
  color: whitesmoke;
}


/* Add a color to the active/current link */

.topnav a.active {
  background-color: #333;
  color: #72bcd4;
}

.row {
  display: inline-flex;
  margin-top: -32px;
  margin-left: -50px;
}

.row:nth-child(even) {
  margin-left: 2px;
}

.hexagon {
  width: 100px;
  height: 110px;
  margin: 2px;
  background-color: #111;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: animation 4s linear infinite;
  transition: 1s;
}

.hexagon:hover {
  background-color: #0f0;
  transition: 0s;
}

@keyframes animation {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.hexagon:after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  background-color: #111;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.03);
  z-index: 1;
}

.background {
  overflow: hidden;
}

<div class="container">
  <div class="topnav">
    <a class=a ctive href="{{ url_for('home') }}">Home</a>
    <a href="{{ url_for('read') }}">Read</a>
    <a href="{{ url_for('create') }}">Create</a>
  </div>
  <h1>Cool Text Effect</h1>
  <div class="background">
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
    <div class="row">
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
      <div class="hexagon"></div>
    </div>
  </div>
</div>

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

HTML 精选笔记