All geek questions in one place

How to make my navigation bar slightly transparent?

I think I could make my site a lot better by making a transparent navigation bar so you can see a slightly dim version of the image below it. I could not find anything that tells me how to do this. Can someone help me?

@import url(https://fonts.googleapis.com/css?family=Pacifico); @import url(https://fonts.googleapis.com/css?family=Patua+One); body { margin: 0px } header { background: #000; color: white; padding: 5px 15px 0px 15px; } header h1 { font-size: 30px; margin: 0; display: inline; padding: 30px; font-family: 'Pacifico', cursive; } nav ul { margin: 0; display: inline; padding: 50px; } nav ul li { background: black; color: white; list-style-type: none; display: inline-block; padding: 20px 35px; margin: 0px; font-family: 'Patua One', cursive; } nav ul li:hover { color: #999; } #hero, #hero1, #hero2, #hero3, #hero4 { background-size: cover; position: relative; height: 100vh; } #hero { background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/78975-Bread_Vol_6_No_3_zps6copbcw9.jpg); } #hero1 { background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/white-parchment-paper-texture_zpsiwfxaipb.jpg); } #hero2 { background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/c62d971b378c55d9d5d4eae139c1499f_zps0nqytwmn.jpg); } #hero3 { background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/553697_zpsfrh8bbhc.jpg); } #hero4 { background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/white-parchment-paper-texture_zpsiwfxaipb.jpg); } .header, .header1, .header2, .header3, .header4 { position: absolute; top: 50%; text-align: center; width: 100%; color: #fff; font-size: 36px; -ms-transform: translate(0, -50%); /* IE 9 */ -webkit-transform: translate(0, -50%); /* Safari */ transform: translate(0, -50%); } .ArtOfCakes { width: 300px; text-align: center; } #ArtOfCakesImage { width: 600; height: 600px; position: absolute; padding-left: 500px; padding-bottom: 100px; } #logo { font-size: 25px; } p { font-size: 20px; } h2 { font-size: 65px; } 
 <! DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <header> <nav> <h1>Molino</h1> <ul> <li>Home</li> <li>Art Of Cakes</li> <li>Perfect Food</li> <li>Breakfast</li> <li>Specials</li> </ul> </nav> </header> <div> </div> <div id="wrapper"> <div id="hero"> <div class="header"> <h1>Made with love</h1> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> </div> </div> <div id="hero1"> <div class="header1"> <h1>Art Of Cakes</h1> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> </div> </div> <div id="hero2"> <div class="header2"> <h1>Perfect Food</h1> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> </div> </div> <div id="hero3"> <div class="header3"> <h1>Breakfast</h1> <h3>7am Breakfast we're Open!</h3> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> </div> </div> <div id="hero4"> <div class="header4"> <h1>Specials</h1> <h3>7am Breakfast we're Open!</h3> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> </div> </div> </div> </body> </html>
+5
source share
4 answers

Well, you can do this:

 header { width: 100%; background: rgba(0, 0, 0, 0.7); color: white; padding: 5px 15px 0px 15px; position: fixed; top: 0; left: 0; z-index: 999; }

use rgba background for transparent color and fixed to fix it on top of all content. then you need to give it width: 100% , and also remove the background color ul li for better viewing.

jsFiddle Demo

+3
source

You can set the transparency of the background color using background: rgba(0,0,0,.3);

Learn more about RGBa .

To move the image under the heading, add some css, for example:

 header { position: absolute; z-index: 99; }

JSFiddle Demo

+1
source

use it looks good when you scroll

 @import url(https://fonts.googleapis.com/css?family=Pacifico); @import url(https://fonts.googleapis.com/css?family=Patua+One); body { margin: 0px } header { background: rgba(0, 0, 0, 0.58); color: white; padding: 5px 15px 0px 15px;position: fixed; top: 0; left: 0; width: 100%; z-index: 99; } header h1 { font-size: 30px; margin: 0; display: inline; padding: 30px; font-family: 'Pacifico', cursive; } nav ul { margin: 0; display: inline; padding: 50px; } nav ul li { color: white; list-style-type: none; display: inline-block; padding: 20px 35px; margin: 0px; font-family: 'Patua One', cursive; } nav ul li:hover { color: #999; } #hero, #hero1, #hero2, #hero3, #hero4 { background-size: cover; position: relative; height: 100vh; } #hero { background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/78975-Bread_Vol_6_No_3_zps6copbcw9.jpg); } #hero1 { background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/white-parchment-paper-texture_zpsiwfxaipb.jpg); } #hero2 { background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/c62d971b378c55d9d5d4eae139c1499f_zps0nqytwmn.jpg); } #hero3 { background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/553697_zpsfrh8bbhc.jpg); } #hero4 { background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/white-parchment-paper-texture_zpsiwfxaipb.jpg); } .header, .header1, .header2, .header3, .header4 { position: absolute; top: 50%; text-align: center; width: 100%; color: #fff; font-size: 36px; -ms-transform: translate(0, -50%); /* IE 9 */ -webkit-transform: translate(0, -50%); /* Safari */ transform: translate(0, -50%); } .ArtOfCakes { width: 300px; text-align: center; } #ArtOfCakesImage { width: 600; height: 600px; position: absolute; padding-left: 500px; padding-bottom: 100px; } #logo { font-size: 25px; } p { font-size: 20px; } h2 { font-size: 65px; } 
 <! DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <header> <nav> <h1>Molino</h1> <ul> <li>Home</li> <li>Art Of Cakes</li> <li>Perfect Food</li> <li>Breakfast</li> <li>Specials</li> </ul> </nav> </header> <div> </div> <div id="wrapper"> <div id="hero"> <div class="header"> <h1>Made with love</h1> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> </div> </div> <div id="hero1"> <div class="header1"> <h1>Art Of Cakes</h1> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> </div> </div> <div id="hero2"> <div class="header2"> <h1>Perfect Food</h1> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> </div> </div> <div id="hero3"> <div class="header3"> <h1>Breakfast</h1> <h3>7am Breakfast we're Open!</h3> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> </div> </div> <div id="hero4"> <div class="header4"> <h1>Specials</h1> <h3>7am Breakfast we're Open!</h3> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> </div> </div> </div> </body> </html>
+1
source

You should make the title โ€œless solidโ€ with:

 background: rgba(0, 0, 0, 0.8);

or using:

 opacity: 0.8;

You can read about the difference here: CSS opacity vs rgba: which one is better?

Remove color and color

Then you should put the title on the page with:

 position: fixed; z-index: 100;

If you want a fixed position or

 position: absolute; z-index: 100;

if you want a title scroll

And stretch the title with

 width: 100%;
+1
source

Source: https://habr.com/ru/post/1245141/

More articles:


All Articles