时间戳

首页 > 解决方案 > 图片：不透明度悬停在我的固定标题后面？

css - 图片：不透明度悬停在我的固定标题后面？

问题描述

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

（请注意，这仍然是一项正在进行的工作......）

提前致谢

这是一个屏幕截图，显示我的意思

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>

标签： csshovercss-positionz-indexopacity

解决方案

感谢您的屏幕截图，它帮助我在本地重新创建了该问题。我通过删除andz-index上的值解决了这个问题：header.proj-img

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;
}

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

推荐阅读