CODEWITHSUNDEEP
htmlcss
user15149541
user15149541

Reputation:

How to make nav black and transparent

How can I make the navigation black & transparent/see through like this?

enter image description here

I tried using rgba, but it made the black a whiter color

nav {
width:100%;
height: 3rem;
background-color:rgba(0,0,0,0.3);
}
<nav>Nav</nav>

Upvotes: 1

Views: 390

Answers (2)

Real Quick
Real Quick

Reputation: 2800

You're already doing it actually. You're using an rgba color value, which is already a step in the right direction.

RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Now you just need to set your background image. Try this:

nav {
    width:100%;
    height: 3rem;
    background-color:rgba(0,0,0,0.7);
  }

  nav > p {
    color: white;
  }

  body {
    background-image: url("https://webneel.com/daily/sites/default/files/images/daily/10-2013/3-nature-photography-cherry-tree.jpg");
  }
<nav><p>Nav</p></nav>

Upvotes: 1

Michael Dahan
Michael Dahan

Reputation: 128

Try this hex code

nav {
width:100%;
height: 3rem;
background-color: #0000009E;
}

Also you can try and add another css rule.. opacity: 0.3; play with the value between 0 to 1.

Upvotes: 1

Related Questions