背景图像未在 Firefox 和 chrome 上显示

Question

我遇到了一个问题，即背景图像没有显示在 chrome 和 firefox 上；它是全宽 div 的背景图像。任何帮助表示赞赏:) 请在下面查看我的代码：

#judges {
	width: 960px;
	margin: 0 auto;
	padding-top: 80px;
}

#judges .col1 p, #judges .col2 p {
	font-family: 'SohoGothicPro-regular', verdana, sans-serif;
	text-align: center;

}

#judges .col1 p, #judges .col2 p, #judges .col1 h3, #judges .col1 h3 {
	color: white;
} 

#judges_bg {
	clear: both;
	background-image: url('img/faces.png');
    position: absolute;
    width: 100vw;
    left: calc(-50vw + 50%);
    height: 380px;
    overflow: hidden;
}


#judges .readmore a {
	color: white;
}

    <div id="judges_bg" class="grey_overley">
    	<div id="judges"><!-- JUDGES START -->
			
			<div class="col1" style="color: white; text-shadow: 0 0 70px rgba(1,2,2,.99); font-family: 'SohoGothicPro-bold', verdana, sans-serif;">
				<div  class="wow slideInLeft" data-wow-duration="2s"  data-wow-offset="100"><p>The distinguished, international panel of judges is comprised of engineers and scientists representing the diversity of the profession. Lord Alec Broers is Chairman of the 2015 Judging Panel.</p></div>
			</div>
			
			<div class="col2">
			<div  class="wow slideInRight" data-wow-duration="2s" data-wow-offset="100">
    			<h3 style="color: white; text-shadow: 0 0 70px rgba(1,2,2,.99);">Who are the<br> <span>Judges?</span></h3></div>
    		</div>
			
			

			
    	</div><!-- JUDGES END -->
    	<div class="read_more"><a href="#" style="color: white;">Meet the Judges</a></div>
    </div>

Answer 1

大概是这条线不好：

background-image: url('img/faces.png');

改成：

background-image: url('../img/faces.png');

我知道问题所在。 img/faces.png 不存在！您正在使用 WordPress，您必须上传要使用的图像。转到图像并单击它，您将看到图像的完整路径名。复制它，并将其粘贴到 url 标签中，如下所示：url('COPY_LINK_HERE')。那必须解决它。

Answer 2

width: 100vw;
left: calc(-50vw + 50%);

vw 单位不正确！

看到这个帖子：Is there any cross-browser javascript for making vh and vw units work