时间戳

首页 > 解决方案 > 我的背景图像与我的导航栏重叠？

html - 我的背景图像与我的导航栏重叠？

问题描述

* {
  box-sizing: border-box;
  padding: 0%;
  margin: 0%;
}
#navigation{
  position:fixed;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7rem;
  box-shadow:  0 4px 14px 0 rgba(0, 0, 0, 0.829), 0 6px 30px 0 rgba(0, 0, 0, 0.19);
}
.logo{
  flex:0.7;
  width: 3rem;
  z-index: 2;
}
#nav-links{
  flex: 2;
  z-index: 2;
}
#nav-links ul{
  display: flex;
  z-index: 2;
}
#nav-links ul li{
  list-style: none;
  font-size: 1.6rem;
  padding: 0rem 1rem;
}
#nav-links ul li a{
  text-decoration: none;
  padding: 0rem 2.5rem;
  color: rgb(6, 177, 20);
  font-family: sans-serif;
  font-weight: 500;
}
#btns{
  flex: 0.7;
}
#cirlce{
 
  height: 49rem;
  width: 100%; 
 margin-top: 0px;
 top: 7rem;
  z-index: 1;
  position: absolute;

 
  clip-path: circle(62.2% at 50% 0%); 
  background-color: black;
  background-image: url(./shrishti-flowers-2.jpg);
  background-repeat: no-repeat;
  background-size: 100% 50rem;
  background-attachment: fixed;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;500&family=Ballet&family=Roboto&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="terms.css" />
    <script
      src="https://kit.fontawesome.com/dcd878f67c.js"
      crossorigin="anonymous"
    ></script>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap"
      rel="stylesheet"
    />

  </head>
  <body>
   <header>
     <div id="navigation">
       <div class="logo">
           <img src="./SHRISHTI FLOWERS - Copy.png" alt="" style="height: 7rem; width: 7rem;">
           
       </div>
       <div id="nav-links">
          <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">HOME</a></li>
            <li><a href="#">HOME</a></li>
            <li><a href="#">HOME</a></li>
          </ul>
       </div>
       <div id="btns">
          <button id="complaint" class="btns">complaint</button>
          <button id="contact" class="btns">Contact us</button>
       </div>
     </div>
    
   </header>
    <div id="cirlce"></div>
  </body>
</html

大家好，我遇到了一个问题，我不知道如何发送这个半圆，我是 CSS 新手，对 z 索引不太了解。（图像不可见，所以我使用了黑色背景）。如果你们能解决这个问题，我会很高兴。（对不起我的英语不好）......................

标签： htmlcssflexboxcss-positionz-index

解决方案

尝试添加background-color到导航栏！

推荐阅读