html - 我有一张背景图片，我必须在该图片上放置 3 x 3 图片，但图片重叠

Question

我正在开发一个使用 bootstrap 4 的网站。我有一个背景图像，我必须在该图像上放置 3 x 3 图像，但图像重叠。它也是响应式的。

代码如下:

        <div class="col-md-4  col-sm-4" >
            <div class="column">
            <img src="assets/images/bg.png" class="img-responsive" >
            </div>
        </div>

        <div class="col-md-4 col-sm-4 " >
            <div class="column">
            <img src="assets/images/bg.png" class="img-responsive">
            </div>
        </div>

        <div class="col-md-4  col-sm-4" >
            <div class="column">
            <img src="assets/images/bg.png" class="img-responsive" >
            </div>

        </div>  
    </div>

sample image

Answer 1

您应该设置 div 的 background-image 请看一下 jfFiddle

body {
  background-image: url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-size: cover;
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  height: 100px;
}

.background1 {
  background-image: url(https://mdbootstrap.com/img/Photos/Others/background.jpg);
  background-size: cover;
}

.background2 {
  background-image: url(https://img.freepik.com/free-vector/abstract-low-poly-design-background_1048-8196.jpg?size=338&ext=jpg);
  background-size: cover;
}

.background3 {
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPgx2MsZXRF0vNZ2_UX9VPouShDW33Ug4LBLzoAi_bPuqZdH0j);
  background-size: cover;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col background1">
      1 of 3
    </div>
    <div class="col background2">
      2 of 3
    </div>
    <div class="col background3">
      3 of 3
    </div>
  </div>
</div>