将图片库放在背景图片上答案

【问题标题】：Putting an image gallery over a back ground image将图片库放在背景图片上
【发布时间】：2018-08-10 04:08:41
【问题描述】：

在我的主页上，我有一张背景图片，我想用一个位于中心的图片库（4 张图片）覆盖该背景图片。我附上了screen shot 给人们一个想法。

谢谢

【问题讨论】：

图片是你想要的还是你拥有的？你能包括你当前的代码吗？

【解决方案1】：

像这样：

document.getElementById('g1').onclick = function() {
  document.getElementById('bigImage').innerHTML = '<img src="http://www.kurzweilai.net/images/Naam-Limits-of-Earth-Part1-001-earth-600x600.jpg" style="height: 600px; width: 600px;">';
  document.getElementById('g1').innerHTML = '<img src="http://www.spitzer.caltech.edu/uploaded_files/images/0009/6502/ssc2013-07b_Ti.jpg" style="height: 60px; width: 60px;">';
};

#bigImage{
  width: 600px;
  height: 600px;
}
#gallery {
  width: 60px;
  height: 60px;
  z-index: 99999;
}

<div>
  <div id = "bigImage">
    <img src="http://www.spitzer.caltech.edu/uploaded_files/images/0009/6502/ssc2013-07b_Ti.jpg" style="height: 600px; width: 600px;">
  </div>
  <div id = "gallery">
    <div id = "g1">
      <img src="http://www.kurzweilai.net/images/Naam-Limits-of-Earth-Part1-001-earth-600x600.jpg" style="height: 60px; width: 60px;">
    </div>
  </div>

</div>

【讨论】：

【解决方案2】：

或者像这样，通过使用位置属性...

#bigImage{
  width: 600px;
  height: 600px;
  background-image: url("http://www.spitzer.caltech.edu/uploaded_files/images/0009/6502/ssc2013-07b_Ti.jpg");
}
#gallery {
  width: 60px;
  height: 60px;
  z-index: 99999;
  position: absolute;
  bottom: 30px;
  right: 30px;
}

<div id = "bigImage">
  <div id = "gallery">
      <img src="http://www.kurzweilai.net/images/Naam-Limits-of-Earth-Part1-001-earth-600x600.jpg" style="height: 60px; width: 60px;">
    </div>
</div>

【讨论】：