重叠式广告不会占据整页

Question

我正在为我的网站创建一个新页面，并且背景图片很好，但是我想使用覆盖层使图片变暗。但是叠加层并不会占据整页！

我已经尝试了很多东西，但是没有任何效果，这是我的html和CSS代码：

/* //////////////////////// [ Background ] //////////////////////// */

body, html
{
	height: 100%;
	background-color: #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.bg-img
{
	background-image: url("../../images/background/bg.jpg");
	display: block;
  	position: absolute;
  	width: 100%;
  	height: 100%;
  	top: 0;
  	left: 0;
  	background-position: center;
  	background-repeat: no-repeat;
    background-size: cover;
}

.overlay
{
	position: relative;
  	z-index: 1;
  	width: 100%;
  	min-height: 100vh;
}

.overlay::before
{
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
  	background-color: rgba(0,0,0,0.8);
}

<div class="bg-img"></div>
<div class="overlay"></div>
		

我想你明白我想要什么。如果有人可以帮助我在整个页面上进行叠加，那将非常好。

Answer 1

在正文中添加margin: 0

body,
html {
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.bg-img {
  background-image: url("https://picsum.photos/id/446/3200/3200");
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
}

.overlay::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

<div class="bg-img"></div>

<div class="overlay"></div>