如何设置该元素的100%不透明度？

Question

我是网络开发的初学者，我正在创建我的第一个网站。我想每次将 .maintitle 类（带有文本 Jakub Poznanski）的可见性设置为 100%，但是当不透明度设置为 0.6 时，它与列表的悬停选项发生冲突。有人知道如何解决这个问题吗？代码和github链接如下。 + 如果您对我有任何建议，我很乐意

GitHub 链接： https://github.com/Vorhacz/HTML-CSS/tree/main/websiteCV

* {
  transition: 300ms;
  margin: 0;
  padding: 0;
  font-family: 'Century Gothic', sans-serif;
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
}

.logo-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 100px;
}

.logo {
  width: 300px;
  height: auto;
}

.underlogotext {
  display: flex;
  justify-content: left;
  font-family: 'Dancing Script';
  font-size: 19px;
  font-style: italic;
  margin-top: 10px;
}

#header {
  width: 100%;
  height: 100vh;
  background-image: url(images/background.png);
  background-size: cover;
  background-position: center;
}

.container {
  padding: 10px, 10%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.maintitle a {
  opacity: 1;
  font-size: 110%;
  color: #bed6ff;
}

nav ul li {
  display: inline-block;
  list-style: none;
  margin-top: 30px;
  margin-left: 30px;
}

nav ul li a {
  font-weight: 400;
  color: #e5eafc;
  text-decoration: none;
  border-radius: 100px;
  cursor: pointer;
}

nav ul li a:hover {
  color: #bed6ff;
}

nav ul li a:not(:hover) {
  opacity: 0.6;
}

<div id="header">
  <div class="container">
    <nav>
      <ul>
        <li class="maintitle"><a href="#">Jakub Poznański</a></li>
        <li><a href="#">O mnie</a></li>
        <li><a href="#">Umiejętności</a></li>
        <li><a href="#">Doświadczenie</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </div>
  <div class="logo-container">
    <div class="logo">
      <img class="logo" src="images/logo.png">
      <p class="underlogotext">Tutaj będzie jakiś mądry opis</p>
    </div>
  </div>
</div>

Answer 1

很好，您联系了 Stackoverflow 的其他开发者！

通过查看 Github 上的代码，我注意到您将每个超链接

<a>

元素的不透明度设置为 0.6 不透明度。您可以采取一些措施来解决该问题，但我认为下面为您提供的解决方案是最好的。

使用不透明度来改变颜色实际上并不是最好的主意，因为你的元素也会变得透明。看看您到目前为止构建的网站，我建议将其更改为实际颜色。无论您使用什么背景颜色，这都将始终保持颜色一致。所以你的 CSS 代码就会变成这样。

nav ul li a { color: #898d98 }

nav ul li a:hover,
nav ul li.maintitle a { color: #bed6ff }

这样您的

.maintitle

超链接元素将始终具有相同的颜色。

祝你好运！