How do I make my nav bar slightly transparent?
<p>I'm thinking i could make my website look a lot better by making the nav bar transparent, so you can see a slightly dimmed version of the image underneath it. I have not been able to find anything that tells me how to do this. Could someone help me please?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;! DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;header&gt;
    &lt;nav&gt;
      &lt;h1&gt;Molino&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li&gt;Home&lt;/li&gt;
        &lt;li&gt;Art Of Cakes&lt;/li&gt;
        &lt;li&gt;Perfect Food&lt;/li&gt;
        &lt;li&gt;Breakfast&lt;/li&gt;
        &lt;li&gt;Specials&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  &lt;div&gt;

  &lt;/div&gt;
  &lt;div id="wrapper"&gt;
    &lt;div id="hero"&gt;
      &lt;div class="header"&gt;
        &lt;h1&gt;Made with love&lt;/h1&gt;
        &lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci
          &lt;br&gt;tation ullamcorper suscipit lobortis nisl ut
          &lt;br&gt;aliquip ex ea commodo consequat. Duis
          &lt;br&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="hero1"&gt;
      &lt;div class="header1"&gt;
        &lt;h1&gt;Art Of Cakes&lt;/h1&gt;
        &lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci
          &lt;br&gt;tation ullamcorper suscipit lobortis nisl ut
          &lt;br&gt;aliquip ex ea commodo consequat. Duis
          &lt;br&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="hero2"&gt;
      &lt;div class="header2"&gt;
        &lt;h1&gt;Perfect Food&lt;/h1&gt;
        &lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci
          &lt;br&gt;tation ullamcorper suscipit lobortis nisl ut
          &lt;br&gt;aliquip ex ea commodo consequat. Duis
          &lt;br&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="hero3"&gt;
      &lt;div class="header3"&gt;
        &lt;h1&gt;Breakfast&lt;/h1&gt;
        &lt;h3&gt;7am Breakfast we're Open!&lt;/h3&gt;
        &lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci
          &lt;br&gt;tation ullamcorper suscipit lobortis nisl ut
          &lt;br&gt;aliquip ex ea commodo consequat. Duis
          &lt;br&gt;
        &lt;/p&gt;

      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="hero4"&gt;
      &lt;div class="header4"&gt;
        &lt;h1&gt;Specials&lt;/h1&gt;
        &lt;h3&gt;7am Breakfast we're Open!&lt;/h3&gt;
        &lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci
          &lt;br&gt;tation ullamcorper suscipit lobortis nisl ut
          &lt;br&gt;aliquip ex ea commodo consequat. Duis
          &lt;br&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>