新手上路做网站,遇到一点离谱的问题:
需要做一个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上访问了一下发现有如下箭头指示的一个白条(灰色阴影遮过去了):
实在是也不知道问题出在哪里了……希望大家帮帮忙