Question

我正在为我正在开发的游戏制作一个网站。我刚刚开始，我正在使用导航栏。我希望徽标文本是纯黑色，没有不透明度，但我希望背景块具有不透明度。也是最有效的方法。我是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：

＆＃13;

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

＆＃13;

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

＆＃13;

检查区别：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

对于使用不透明度的背景background-color: rgba(0,0,0,0.4)或使用不透明度制作png 1x1 px并添加为background: transparent url("image.png") left top repeat;

Answer 3

为background-color: rgba(255,255,255,0.7);设置#navbar-logo，因为您使用纯色作为背景。

Answer 4

#background{background-color:blue;height:300px;}
#opacity{background-color:rgba(255,0,0,0.5);position:absolute;top:4%;left:20%;}

<div id="background">underneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneath
  <div id="opacity">
  <h3>Hello</h3>
  </div>
underneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneath</div>

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

4 个答案: