html - 模糊导航栏

Question

我想要一个带有导航栏、背景以及某种形式的前景的页面。 我希望前景在原始背景之上是一种透明背景，但问题是每当我将 opacity: .8 添加到我的 css 代码时，我的导航栏也会变得透明，我无法单击下拉菜单中的任何选项

body {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #78706e;
  height: 100%;
  min-height: 100%;
  font-size: 16pt;
  font-family: Times;
  min-height: 100%;
  color: black;
  z-index: 1;
  position: absolute;
  ;
}

.ij {
  border-radius: 7px;
  background-color: #a5a5ad;
  padding: 30px;
  opacity: .8; //Here is the problem
}

nav {
  display: flex;
  justify-content: center;
}

html {
  height: 100%;
}

.header {
  background-image: url("m.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

nav ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

nav ul li {
  right: 0;
  left: 0;
  float: left;
  width: 240px;
  height: 40px;
  background-color: black;
  opacity: .8;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
}

nav ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

nav ul li a:hover {
  background-color: #0a0d54;
}

nav ul li ul li {
  display: none;
}

nav ul li:hover ul li {
  display: block;
  font-size: 16px;
  /* Add this */
  white-space: nowrap;
}

.container {
  border-radius: 7px;
  padding: 30px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 8px;
}

.col-75 {
  float: left;
  width: 90%;
  margin-top: 10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.footer {
  float: left;
  padding: 2px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: white;
  background-color: black;
  opacity: .8;
  right: 0;
  font-family: Times;
  left: 0;
}

<img src="image.png" alt="image" width="400" height="200">
<nav>
  <ul>

    <li><a href="Home.html">Home</a></li>
    <li><a href="#">Academic</a>
      <ul>
        <li><a href="Departments.html">Departments</a></li>
        <li><a href="Undergrad.html">Undergraduate Programs</a></li>
        <li><a href="Grad.html">Graduate Programs</a></li>
      </ul>
    </li>
    <li><a href="#">Admission</a>
      <ul>
        <li><a href="un.html">Undergraduate Admissions</a></li>
      </ul>
    </li>
    <li><a href="#">Research</a>
      <ul>
        <li><a href="KeyResearch.html">Key Research Areas</a></li>
        <li><a href="Innovation.html">Innovation & Entrepreneurship</a></li>
        <li><a href="Highlight.html">Highlighted Units & Facilities</a></li>
        <li><a href="GradResearch.html">Graduate Research</a></li>
        <li><a href="UndergradResearch.html">Undergraduate Research</a></li>
      </ul>
    </li>
    <li><a href="#">Campus Life</a>
      <ul>
        <li><a href="StuLife.html">Student Life</a></li>
        <li><a href="Inclusion.html">Inclusion</a></li>
      </ul>
    </li>
  </ul>
</nav>

<div class="ij">
  <div class="container">

    <div class="row">
      <div class="col-25">
        <h1> side </h1>
      </div>
      <div class="col-75">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
      </div>
    </div>


    <div class="row">
      <div class="col-75">
        <h3>GLOBAL</h3>
        <h2>The Connected World </h2>
        <img src="img1.png" alt="img" hight="300" width="400">
        <p>Notre Dame seeks to be in the world, and to bring the world to Notre Dame, because inquiry and scholarly exchange are enriched by the pursuit of cultural fluency.</p>
        <h3>Faith & Service</h3>
        <h2>The Demands of Justice</h2>
        <img src="img2.png" alt="img" hight="300" width="400">
        <p>Notre Dame is animated by a faith that inspires us to seek knowledge because of the powerful tool it can be to improve humankind.</p>
      </div>
    </div>


    <video width="600" controls>
  <source src="University of Notre Dame du Lac.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>



  </div>
</div>
<div class="footer">
  <a href="https://www.facebook.com/notredame/"> FACEBOOK</a>
  <a href="https://twitter.com/NotreDame/"> TWITTER </a> &copy 2019 University of Notre Dame Notre Dame, IN 46556 USA 41.703234 -86.238985 Phone: (574) 631-5000

</div>

Answer 1

试试这个模糊透明导航

nav ul li {
    right: 0;
    left: 0;
    float: left;
    width: 240px;
    height: 40px;
    background-color: rgba(44, 43, 43, 0.53);   /*   Add this rgba color  */
    opacity: .8;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
}