Question

我真的需要你的帮助！我疯了..我想知道是否有可能让几个div的背景图像都可供下载，并使它们在点击时起到灯箱的作用（我希望弹出功能让人们看到它下载之前的图像）。这甚至可能吗？或者我应该制作另一种类型的网格系统来使其工作？我的代码输入如下：

HTML：

<body>
  <div class="wrapper">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
    </div>
  <div class="wrapper2">  
    <div class="box box4">Box 4</div>
    <div class="box box5">Box 5</div>
  </div>
</body>

CSS：

.wrapper{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-auto-rows:minmax(100px, auto);
  grid-gap:1em;
  justify-items:stretch;
  align-items:stretch;
  width: 75%;
  margin: 0 auto;
}

.box1{
  /*align-self:start;*/
  grid-column:1/3;
  grid-row:1/4;
  background-image: url("PICTURES/bowl.jpg");
  background-size: 700px 500px;
  background-repeat: no-repeat;

}

.box2{
  /*align-self:end;*/
  grid-column:3;
  grid-row:1/4;
  background-image: url("PICTURES/tallrikshylla.jpg");
  background-size: 250px 350px;
  background-repeat: no-repeat;
}

.box3{
  /*justify-self:end;*/
  grid-column:1/4;
  grid-row: 4/8;
  background-image: url("PICTURES/setting2.jpg");
  background-size: 1000px 700px;
  background-repeat: no-repeat;
}


.wrapper2 {

  display:grid;
  grid-template-columns:fr 2fr 1fr;
  grid-auto-rows:minmax(100px, auto);
  grid-gap:1em;
  justify-items:stretch;
  align-items:stretch;
  width: 75%;
  margin: 0 auto;
}


.box4{
  grid-column: 1/3;
  grid-row: 8/13;
  background-image: url("PICTURES/setting5.jpg");
  background-repeat: no-repeat;
  background-size: 300px 500px;
}
.box5{
  grid-column: 3/4;
  grid-row: 8/13;
  background-image: url("PICTURES/setting5.jpg");
  background-repeat: no-repeat;
  background-size: 300px 500px;
}

如何使div的背景图像可供下载？

0 个答案: