如何设置重叠边距？

Question

我在div中使用背景图片和叠加层。但是覆盖层无法正确重叠。由于种种原因，双方都留有一定余地。我尝试设置页边距，使其完全重叠，但随后又干扰了我的布局。我该如何纠正？

/*numscroller*/
.image{
	height:auto;
	width:100%;
	background:#FFCC99;
	}
.over2{
	height:auto;
	width:100%;
	background-color:rgba(0,0,0, 0.7);
	}
	.num{
		margin:auto;
		padding:6rem 0rem;
		float:left;
		}

<script src="https://raw.githubusercontent.com/tinywall/numscroller/master/numscroller-1.0.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
<div class="row " >
    	<div class="col-12 image">
        
        	<div class="over2">
                <div class="row justify-content-around">
                    <div class=" num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3">
                        <center>
                          
                            <h3><b>Slums covered</b></h3>
                            <h3 class='numscroller' data-min='1' data-max='7' data-delay='1' data-increment='1'><b>7</b></h3>
                        </center>
                    </div><!--num col-10 ends-->
                    <div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
                        <center>
                            
                            <h3><b>Lives changed</b></h3>
                            <h3 class='numscroller' data-min='1' data-max='400' data-delay='1' data-increment='3'><b>400</b></h3>
                        </center>
                    </div><!--num col-10 ends-->
                    <div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
                        <center>
                            
                            <h3><b>Our supporters</b></h3>
                            <h3 class='numscroller' data-min='1' data-max='30' data-delay='1' data-increment='1'><b>30</b></h3>
                        </center>
                    </div><!--num col-10 ends-->
                </div><!--row justify ends-->
            </div><!--over ends-->
            
        </div><!--col-12 ends-->
    </div><!--row ends-->
</div>

Answer 1

您可以相对放置图像容器，并且覆盖层应该绝对放置。

.image {
  position: relative;
  height: 100px;
  width: 100%;
  background: red;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="image">
    <span>I am the image </span>
    <div class="overlay">
      I am the overlay
    </div>
  </div>