qq_34136945
跑偏的屯
采纳率100%
2021-03-02 10:42

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

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

需要做一个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上访问了一下发现有如下箭头指示的一个白条(灰色阴影遮过去了):

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • hu071700 AllPromise 1月前

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

    点赞 评论 复制链接分享
  • qq_34136945 跑偏的屯 1月前

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

    点赞 评论 复制链接分享