链接装饰正在影响我的固定导航栏

【问题标题】：Link decorations are affecting my fixed nav bar链接装饰正在影响我的固定导航栏
【发布时间】：2020-09-24 02:06:13
【问题描述】：

我是新手，请多多包涵。我的目标是让我的图像链接以一半不透明度出现，然后在悬停时以完全不透明度出现。这部分正在工作，但它干扰了我页面顶部的固定导航栏。

如果我向下滚动直到图像链接有点“低于”导航栏，导航栏也会变成一半不透明度。此时，如果我将鼠标悬停，它们会正确显示完全不透明度，并且似乎位于导航栏“下方”。

这是我的代码：

.navbar{
  background-color: #50394c; 
  align-items: right;
  width: 100%;
  height: 60px;
  position:fixed;
  top:0;
}
#container a:link{opacity:.5;}
#container a:hover{opacity:1;}
#container{
  display:grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  grid-gap: 15px;
  padding:20px;
  justify-content: center;
  align-content: center;
}

我的 HTML 有这个容器 ID，其中 div 包含所有链接和图像。

我将不透明度设置放在哪里似乎并不重要（在单个图像元素中，div 类，作为链接装饰等），一旦元素在滚动时遇到导航栏，它仍然会影响导航栏。

【问题讨论】：

• 图片在你的代码中到底在哪里？
• 我的图片在我的 html 中：

  codepen.io/ChelseaS/full/vYGejgo"> imgur.com/ciNLs8H.png" alt="Zappa 致敬项目" >
• 在上面的链接中找不到导航栏：该链接指向 Frank Zappa 致敬页面
• 你能在 JSFidle 或类似的东西上建立一个例子吗？它将帮助其他人理解和调试您的问题。
• 是的，抱歉，这只是我的代码的一部分。 codepen.io/ChelseaS/pen/YzqBWjx