Question

我正在开发一个使用引导程序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>

Answer 2

您可以尝试使用全屏背景图像的简单示例。您可以编辑最小高度值以获得所需的效果。

示例：https://codepen.io/brooksrelyt/pen/REzMZW

HTML：

<div class="full-home" style="background-image:url('https://via.placeholder.com/1200x800');" ></div>

CSS：

.full-home {
    width: 100%;
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-position:50% 50%\9 !important;
    background-size: cover;
    min-height: 100vh;
}

使用您的代码（由于无法访问您的图片，因此更改了图片的网址）

<div class="full-home" style="background-image:url('https://via.placeholder.com/1200x800');"></div>
<div class="container">
  <div class="row">
    <div class="col-md-4  col-sm-4">
      <div class="column">
        <img src="https://via.placeholder.com/300x200" class="img-responsive">
      </div>
    </div>

    <div class="col-md-4 col-sm-4 ">
      <div class="column">
        <img src="https://via.placeholder.com/300x200" class="img-responsive">
      </div>
    </div>

    <div class="col-md-4  col-sm-4">
      <div class="column">
        <img src="https://via.placeholder.com/300x200" class="img-responsive">
      </div>

    </div>
  </div>
</div>

我有一张背景图片，在那张图片上我必须放3 x 3张图片，但是这些图片重叠了

2 个答案: