展开后更改div背景颜色

Question

当我点击img时，我需要将其展开并使背景的其余部分变黑。

除了黑色部分外，我还有其他工作。

function showImage(smSrc, lgSrc) {
  document.getElementById('largeImg').src = smSrc;
  showLargeImagePanel();
  unselectAll();
  setTimeout(function() {
    document.getElementById('largeImg').src = lgSrc;
  }, 1)
}

function showLargeImagePanel() {
  document.getElementById('largeImgPanel').style.display = 'block';
  showLargeImagePanel().setBackground(Color.black);
}

function unselectAll() {
  if (document.selection)
    document.selection.empty();
  if (window.getSelection)
    window.getSelection().removeAllRanges();
}

#largeImgPanel {
  text-align: center;
  display: none;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  background: rgba(0, 0, 0, 0.5);
}
body {
  margin: 15px;
}
div.polaroid {
  width: 13, 8%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 5px;
  height: 130px;
  padding-left: 10px;
  padding-top: 7px;
  display: inline-block;
  border-radius: 10px;
}
div.container {
  text-align: center;
  padding: 10px 20px;
}

<header>
  <img src="bilder/header2.jpg">

</header>
<nav>
  <img src="bilder/logo.png">
  <h1 style="font-family:sans-serif;"> De beste bildene for en god pris. </h1>
  <ul>
    <li><a href="index.html">Hjem</a>
    </li>
    <li><a href="bilde.html">Kjøp bilder</a>
    </li>
    <li><a href="kontakt.html">Kontakt</a>
    </li>
    <li><a href="events.html">Events</a>
    </li>
    <li><a href="hjelp.html">Hjelp</a>
    </li>
  </ul>

</nav>

<div id="innhold">
  <div id="hoyreside">
    <div align="center">
      <input type="text" name="search" placeholder="Søk..">
    </div>
    <br>
    <h1> Galleri </h1>
    <p>Her kan du se på flere bilder som vil bli utstilt på gallerier over hele verden.
    </p>

    <p>Klikk på bildene for å forstørre de, klikk igjen for å lukke bildet.</p>

  </div>

  <div id="main">
    <h1> Galleri </h1>




    <div class="polaroid">


      <img src="1.jpg" style="cursor:pointer" onclick="showImage (this.src, '1.jpg');" onclick="showImage (this.polaroid, '1.jpg');" />
      <div class="container">
        <p>Håvard.</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="2.jpg" style="cursor:pointer" onclick="showImage(this.src, '2.jpg');" />
      <div class="container">
        <p>Bent-Olav</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="3.jpg" style="cursor:pointer" onclick="showImage(this.src, '3.jpg');" />
      <div class="container">
        <p>Nils Martin</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="4.jpg" style="cursor:pointer" onclick="showImage(this.src, '4.jpg');" />
      <div class="container">
        <p>Per</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="5.jpg" style="cursor:pointer" onclick="showImage(this.src, '5.jpg');" />
      <div class="container">
        <p>Theis</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="6.jpg" style="cursor:pointer" onclick="showImage(this.src, '6.jpg');" />
      <div class="container">
        <p>Per og Tobias</p>
      </div>
    </div>

    <br>
    <br>
    <br>

    <div class="polaroid">
      <img src="1.jpg" style="cursor:pointer" onclick="showImage (this.src, '1.jpg');" onclick="polaroid (this.src, '1.jpg');" />
      <div class="container">
        <p>Håvard.</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="2.jpg" style="cursor:pointer" onclick="showImage(this.src, '2.jpg');" />
      <div class="container">
        <p>Bent-Olav</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="3.jpg" style="cursor:pointer" onclick="showImage(this.src, '3.jpg');" />
      <div class="container">
        <p>Nils Martin</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="4.jpg" style="cursor:pointer" onclick="showImage(this.src, '4.jpg');" />
      <div class="container">
        <p>Per</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="5.jpg" style="cursor:pointer" onclick="showImage(this.src, '5.jpg');" />
      <div class="container">
        <p>Theis</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="6.jpg" style="cursor:pointer" onclick="showImage(this.src, '6.jpg');" />
      <div class="container">
        <p>Per og Tobias</p>
      </div>
    </div>

    <div id="largeImgPanel" onclick="this.style.display='none'">
      <img id="largeImg" style="height:100%; margin:0; padding:0;" />
    </div>

    <br>
    <br>
    <br>

    <div class="polaroid">
      <img src="1.jpg" style="cursor:pointer" onclick="showImage (this.src, '1.jpg');" onclick="polaroid (this.src, '1.jpg');" />
      <div class="container">
        <p>Håvard.</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="2.jpg" style="cursor:pointer" onclick="showImage(this.src, '2.jpg');" />
      <div class="container">
        <p>Bent-Olav</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="3.jpg" style="cursor:pointer" onclick="showImage(this.src, '3.jpg');" />
      <div class="container">
        <p>Nils Martin</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="4.jpg" style="cursor:pointer" onclick="showImage(this.src, '4.jpg');" />
      <div class="container">
        <p>Per</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="5.jpg" style="cursor:pointer" onclick="showImage(this.src, '5.jpg');" />
      <div class="container">
        <p>Theis</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="6.jpg" style="cursor:pointer" onclick="showImage(this.src, '6.jpg');" />
      <div class="container">
        <p>Per og Tobias</p>
      </div>
    </div>

    <div id="largeImgPanel" onclick="this.style.display='none'">
      <img id="largeImg" style="height:100%; margin:0; padding:0;" />
    </div>