Geek Answers Handbook

Styling css opacity over navigation bar

I am creating a website for the game that I am developing. I just started and I am working on the navigation bar. I want the logo text to be solid black, without transparency, but I want the light block to have opacity. Also the most effective way to do this. I am new to html and css.

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

Here is the HTML

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

Thank you for your time!

+4
source share
4 answers

One solution is to use background: rgba(255, 255, 255, 0.7);and give #navbar-logoa higher one 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>
Run codeHide result

Check out the difference here:

.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>
Run codeHide result
+5
source

background-color: rgba(0,0,0,0.4) png 1x1 px background: transparent url("image.png") left top repeat;

0

Set background-color: rgba(255,255,255,0.7);to #navbar-logo, because the background is solid.

0
source 

#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>
Run codeHide result
0
source

More articles:


All Articles