背景图片未加载到浏览器中。文件路径正确

时间:2017-08-28 16:11:23

标签: html css background-image

我遇到了一个我无法解决的情况。背景图片“rs_dyslexia_montage_1.jpg”的文件路径似乎是正确的,但Chrome开发人员工具显示它未加载。页面上的标题图像位于同一文件夹中,具有相同的文件路径并且加载正常。不知道这里发生了什么。任何帮助,将不胜感激。感谢。

PS-我在问题区域上方添加了额外的代码,以防故障排除。

HTML:

<div class="what_now dyslexia_cta col span_6">
    <div>
        <h1>WHAT NOW?</h1>
        <p>Fenean et tortor vel magna sporta eleifend ac leo. Pellentesque dignis.</p>
    </div>
</div>

<div class= "resources dyslexia_cta col span_6">
    <div>
        <h1>RESOURCES</h1>
        <p>For additional information, please click on the resources button.</p>
    </div>
</div>  

<div class="dys_mont_pic1 col span_12"></div>
<div class="dys_mont_pic2 col span_6"></div>
<div class="dys_mont_pic3 col span_6"></div>

和CSS:

.pad_btm {
padding-bottom: 100px;
}

.what_now {
position: relative;
width: 50%;
height: 400px;  
background-color: rgb(165,191,57);
background-repeat: none;
background-size: cover; 
display: flex;
justify-content: center;
align-items: center;
}

.resources {
position: relative;
width: 50%;
height: 400px;
float: right;
background-color: rgb(66,121,160);
display: flex;
justify-content: center;
align-items: center;
}

.dyslexia_cta h1 {
text-align: center;
font-family: 'Montserrat';
color: rgb(255,255,255);
font-weight: 600;
font-size: 52px;
max-width: 500px;
margin: 0px 60px;
padding: 27px 10px 27px 10px;
border: 3px solid white;
}

.dyslexia_cta p {
text-align: center;
font-family: 'Questrial';
color: rgb(255,255,255);
line-height: 28px;
font-size: 20px;
max-width: 550px;
padding: 20px 100px 0px;    

.dys_mont_pic1 {
position: relative;
width: 100%;
height: 500px;  
background-image: url('../img/rs_dyslexia_montage_1.jpg');
background-repeat: none;
background-size: cover;
border-bottom: 7px solid white; 
}

0 个答案:

没有答案