有没有熟练工帮忙看看这个到底是哪里出了问题？

新手上路做网站，遇到一点离谱的问题：

需要做一个banner，在图片上面加一层遮罩，代码如下：

CSS：

.new_news_section .background{
    width: 100%;
    height: fit-content;
}

.new_news_section .background img{
    vertical-align: 100%;
    height: 100%;
    width: 100%;
}

.new_news_section .background .mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.new_news_section .front {
    background: transparent; /*前面div透明背景*/
    position: relative;
    width: fit-content;
    height: fit-content;
}

html：

<section class="new_news_section">
        <div class="row" style="position: relative; padding-bottom: 0">
            <div class="background">
                <img src="03banner.jpg" alt="">
                <div class="mask"></div>
            </div>
           {{-- <div class="front col-md-4 offset-md-4" style="position: absolute; z-index: 2; top: 240px; text-align: center">
                <p style="font-size: 50px; color: white; text-shadow: black 0.1em 0.1em 0.2em">新闻中心</p>
            </div>--}}
        </div>

整个开发过程中没有用多个浏览器调试，使用的是firefox调试开发，写出来的php在firefox上显示如下：

但是今天在chrome上访问了一下发现有如下箭头指示的一个白条（灰色阴影遮过去了）：

实在是也不知道问题出在哪里了……希望大家帮帮忙

我用火狐和谷歌都有灰色的那块,我看了是你mark设置的背景色

啊 我解决了 因为之前都用的是相对百分比的高度 没有参考标准 所以下面的mask img等都是没有参考的