html - 在导航栏上设置 css 不透明度

Question

我正在为我正在开发的游戏制作一个网站。我刚刚开始，我正在处理导航栏。我希望 Logo 文本为纯黑色且没有不透明度，但我希望背景 block 具有不透明度。也是最有效的方法。我是 html 和 Css 的初学者。

这是CSS

.navbar{
     font-family:'Roboto', arial;  
     position: fixed;   
 }
.navbar #navbar-back{
     background: white;
     opacity: .7;
     border-bottom:solid;
     border-bottom-width: 1px;
     border-bottom-color:#A4A4A4;
     width: 100%;
     height: 55px;
 }
.navbar #navbar-logo{
     font-size: 35px;
     font-color: black;
     opacity: 1;
 }

这是HTML

<div class="navbar">
    <div class="navbar" id="navbar-logo">
        <p>Infinity</p>
    </div>
    <div class="navbar" id="navbar-back">
    </div>
</div>

感谢您的宝贵时间!

Answer 1

一个解决方案是使用 background: rgba(255, 255, 255, 0.7); 并给 #navbar-logo 更高的 z-index :

.navbar {
  font-family: 'Roboto', arial;
  position: fixed;
}
.navbar #navbar-back {
  background: rgba(255, 255, 255, 0.7);
  border-bottom: solid;
  border-bottom-width: 1px;
  border-bottom-color: #A4A4A4;
  width: 100%;
  height: 55px;
}
.navbar #navbar-logo {
  font-size: 35px;
  color: black;
  opacity: 1;
  z-index: 2;
}

<div class="navbar">
  <div class="navbar" id="navbar-logo">
    <p>Infinity</p>
  </div>
  <div class="navbar" id="navbar-back"></div>
</div>

检查这里的区别:

.navbar {
  font-family: 'Roboto', arial;
  position: fixed;
}
.navbar #navbar-back {
  background: rgba(255, 255, 255, 0.7);
  border-bottom: solid;
  border-bottom-width: 1px;
  border-bottom-color: #A4A4A4;
  width: 100%;
  height: 55px;
}
.navbar #navbar-logo {
  font-size: 35px;
  color: black;
  opacity: 1;
  z-index: 2;
}

<div class="navbar">
  <div class="navbar" id="navbar-logo">
    <p>Infinity</p>
  </div>
  <div class="navbar" id="navbar-back"></div>
  <div>
    <p style="font-size: 18px;">test</p>
  </div>
</div>