将彩色覆盖添加到节中

Question

我想在html部分使用半透明的颜色覆盖，但它并没有覆盖整个部分。这就是我目前所得到的：

#main {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('https://cdn.pixabay.com/photo/2020/12/23/08/00/bow-lake-5854210_960_720.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
position: relative;
z-index: 1;
}
#main::before {
background-color: rgba(0, 0, 0, 0.80);
content: '';
height: 100%;
position: absolute; 
width: 100%; 
z-index: -1;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="main">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1>This is a text block</h1>
<p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
</div>
<div class="col-lg-6">
<h1>This is a text block</h1>
<p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
</div>
</div>
</div>
</section>

问题是，由于我在#main中使用了顶部和底部填充，所以颜色覆盖在所有屏幕尺寸中都不能始终正确显示。对于大屏幕尺寸，如果我在before元素上添加一些页边空白，这会有所帮助，但对于较小的屏幕尺寸，这没有帮助。无论屏幕大小如何，如果我在#main中使用上下填充，我如何确保颜色覆盖始终覆盖整个部分？感谢

Answer 1

将此规则集添加到#main::before:

top: 0;
left: 0;
right: 0;
bottom: 0;

另外，删除height: 100%和width: 100%。

Answer 2

您只需要在您的伪元素上设置top: 0。

#main {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('https://cdn.pixabay.com/photo/2020/12/23/08/00/bow-lake-5854210_960_720.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
position: relative;
z-index: 1;
}
#main::before {
background-color: rgba(0, 0, 0, 0.80);
content: '';
height: 100%;
position: absolute; 
width: 100%; 
z-index: -1;
top: 0;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="main">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1>This is a text block</h1>
<p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
</div>
<div class="col-lg-6">
<h1>This is a text block</h1>
<p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
</div>
</div>
</div>
</section>

Answer 3

设置覆盖的顶部、底部、左侧和右侧位置，而不是宽度和高度，如下所示：

#main {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('https://cdn.pixabay.com/photo/2020/12/23/08/00/bow-lake-5854210_960_720.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
position: relative;
z-index: 1;
}
#main::before {
background-color: rgba(0, 0, 0, 0.80);
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
z-index: -1;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="main">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1>This is a text block</h1>
<p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
</div>
<div class="col-lg-6">
<h1>This is a text block</h1>
<p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
</div>
</div>
</div>
</section>

它将在其整个父对象上展开覆盖。另一种方法是在某个角落设置位置，例如顶部和左侧，宽度和高度设置为100%。

更好的文档在这里