image:hover 不透明度不会落后于我的固定值 header？

Question

我在尝试解决问题时遇到了问题。我已经为我的“图像：悬停”添加了一些不透明度，但是激活它似乎覆盖了我的固定 header。我试过将 header 放在“z-index: 0;”和“z-index; -1”上的图像，但仍然没有运气。

（请注意，这项工作仍在进行中...）

提前致谢

Here is a screenshot to show what I mean

body {
  background: black;
  color: white;
  font-family: monospace;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background: rgb(247, 40, 40);
  margin: 0;
  z-index: 0;
}

.nav-link,
.project-title,
p {
  text-align: center;
}

#welcome-section {
  width: 100%;
  height: 100vh;
}
h1 {
  padding-top: 140px;
  text-align: center;
  font-size: 80px;
  margin-bottom: 0;
}
.sub-title {
  text-align: center;
}
a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}
#proj-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.proj-img {
  max-height: 20em;
  margin: 0 20px;
  z-index: -1;
}

.proj-img:hover {
  opacity: 60%;
}

@media (max-width: 400px) {
  h1 {
    font-size: 15px;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=
    , initial-scale=1.0"
    />
    <title>Maria Castro | Portfolio</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav id="nav-bar">
        <a class="nav-link" href="#projects">Work</a>
        <a class="nav-link" href="#contact">Contact</a>
      </nav>
    </header>
    <section id="welcome-section">
      <h1>Hi, I'm Maria Castro.</h1>
      <p class="sub-title">Junior Front End Developer</p>
    </section>
    <section id="projects">
      <h2 class="project-title">My work</h2>
      <div id="proj-flex">
        <div id="project-1" href="#">
          <a href="https://ki05u.csb.app/" target="_blank">
            <img class="proj-img" src="images/weatherapp1.jpg" />
          </a>
          <p>Weather Widget</p>
        </div>
        <div id="project-2">
          <a
            href="https://codepen.io/mariaalouisaa/full/rNyLjYa"
            target="_blank"
            ><img class="proj-img" src="images/techdoc.jpg" />
          </a>
          <p>Technical Doc</p>
        </div>
        <div id="project-3" href="#">
          <a href="https://rzgbb.csb.app/" target="_blank"
            ><img class="proj-img" src="images/weatherapp2.jpg"
          /></a>
          <p>Weather App</p>
        </div>
      </div>
    </section>
    <section id="connect">
      <a class="connect-link" id="profile-link" href="#">LinkedIn</a>
      <a class="connect-link" href="#">FCC</a>
      <a class="connect-link" href="#">Codepen</a>
    </section>
  </body>
</html>

Answer 1

感谢您提供屏幕截图，它帮助我在本地重现了该问题。我通过删除 header 和 .proj-img:

上的 z-index 值解决了这个问题

header { 
  /* remove z-index */
  /* z-index: 0; */
}
.proj-img { 
  /* remove z-index */
  /* z-index: -1; */
}

我仍然不知道删除这些 z-index 如何帮助解决问题，但一般来说使用小于 1 的值并不理想。只是为了确保页眉始终位于其他所有内容之上，您可以这样做：

// HTML
<header class="header" />
<div class="container">
  // rest of the content inside this div

// CSS
.header {
  position: fixed;
  z-index: 3;
}
.container {
  position: relative;
  z-index: 2;
}

由于 .container parent 的索引值低于 .header，容器内的任何元素，即使它们 z-index 高于三 (3)； .header永远在上面。

image:hover 不透明度不会落后于我的固定值 header？

image:hover with opacity not staying behind my fixed header?

css

z-index

css-position

hover

opacity