CODEWITHSUNDEEP
htmlcss
Colbeyyy
Colbeyyy

Reputation: 91

Styling css opacity over navbar

I am making a website for a game I am developing. I have just started and I am working on the navbar. I want the logo text to be solid black with no opacity, but I want the background block to have opacity. Also is the most efficient way to do it. I am a beginner in html and Css.

Here is the 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!

Upvotes: 4

Views: 125

Answers (4)

Billy
Billy

Reputation: 2448

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

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

One solution is to use background: rgba(255, 255, 255, 0.7); and give to #navbar-logo a higher 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>

Check here the difference:

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

Upvotes: 5

saNs
saNs

Reputation: 157

Set background-color: rgba(255,255,255,0.7); for #navbar-logo since you use solid color for background.

Upvotes: 0

D.Luss
D.Luss

Reputation: 149

For background with opacity use background-color: rgba(0,0,0,0.4) or make a png 1x1 px with opacity and add as background: transparent url("image.png") left top repeat;

Upvotes: 0

Related Questions