Question

我有一个问题，即背景图片没有出现在chrome和firefox上;它是一个全宽div的背景图像。任何帮助表示赞赏:)请参阅下面的代码：

＆＃13;

#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;
}

＆＃13;

    <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>

＆＃13;

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

没有显示在firefox和镀铬物的背景图象

2 个答案: